有没有办法使用CSS创建类似chrome的选项卡？

Question

我一直在寻找使用CSS编写的类似谷歌浏览器的标签,但找不到.

我试图复制外观,以便在Web应用程序或网站中使用它.

Answer 1

是的,有可能,用css3

我发布了一个博客,关于如何使用它的lil深度,并且遗憾地认为不会继续工作,即使你使用图像

编辑:

删除旧的redyeoperations引用现在导致它的链接农场.这是一个更轻的版本,它也在第三方网站上,所以它不太可能被打倒.

http://codepen.io/jacoblwe20/pen/DxAJF

这是代码

HTML

<div class=tab-container>
  <ul class="tabs clearfix" >
    <li>
      <a href=# >Users</a> 
    </li>
    <li class=active > 
      <a href=# >Pending Lots</a> 
    </li>
    <li> 
      <a href=# >Nearby Lots</a> 
    </li>
    <li>
      <a href=# >Recent Lots</a>
    </li>
  </ul>
</div>
<div class=outer-circle></div>

CSS

body{
  background : #efefef;
  font : .8em sans-serif;
  margin: 0;
}

.tab-container{
  background : #2BA6CB;
  margin: 0;
  padding: 0;
  max-height: 35px;
}

ul.tabs{
  margin: 0;
  list-style-type : none;
  line-height : 35px;
  max-height: 35px;
  overflow: hidden;
  display: inline-block;
  padding-right: 20px
}

ul.tabs > li.active{
  z-index: 2;
  background: #efefef;
}

ul.tabs > li.active:before{
  border-color : transparent #efefef transparent transparent;
}


ul.tabs > li.active:after{
  border-color : transparent transparent transparent #efefef;
}

ul.tabs > li{
  float : right;
  margin : 5px -10px 0;
  border-top-right-radius: 25px 170px;
  border-top-left-radius: 20px 90px;
  padding : 0 30px 0 25px;
  height: 170px;
  background: #ddd;
  position : relative;
  box-shadow: 0 10px 20px rgba(0,0,0,.5);
  max-width : 200px;
}

ul.tabs > li > a{
  display: inline-block;
  max-width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #222;
}

ul.tabs > li:before, ul.tabs > li:after{
  content : '';
  background : transparent;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border-width: 10px;
  top: 0px;
  border-style : solid;
  position : absolute;
}

ul.tabs > li:before{
  border-color : transparent #ddd transparent transparent;
  -webkit-transform : rotate(48deg);
  -moz-transform : rotate(48deg);
  -ms-transform : rotate(48deg);
  -o-transform : rotate(48deg);
  transform : rotate(48deg);
  left: -23px;
}

ul.tabs > li:after{
  border-color : transparent transparent transparent #ddd;
  -webkit-transform : rotate(-48deg);
  -moz-transform : rotate(-48deg);
  -ms-transform : rotate(-48deg);
  -o-transform : rotate(-48deg);
  transform : rotate(-48deg);
  right: -17px;
}

/* Clear Fix took for HTML 5 Boilerlate*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

用于制表符切换的JS~包括jquery来工作或访问codepen

var tabs = $('.tabs > li');

tabs.on("click", function(){
  tabs.removeClass('active');
  $(this).addClass('active');
});

Answer 2

我在CSS技巧中找到了这个,真的很隐蔽:

http://css-tricks.com/examples/MovingHighlight/

Answer 3

我只是给了一些css来获得像Chrome一样的标签,让你可以根据需要使用它.

<style type='text/css'>
  .chrome_tab {
    width: 150px;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid grey;
    border-radius: 80px 80px 2px 2px;
    color: white;
    text-align: center;
  }
</style>


<div class='chrome_tab'>
    muhammad(peace be upon him)
</div>

在这里演示 http://jsfiddle.net/GH7d6/