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

问题描述

我一直在寻找一个使用css编写的谷歌Chrome浏览器的标签，但找不到一个。

对不起，为了确保我清楚，我试图复制外观以便在Web应用程序或网站中使用它

解决方案

Ive发布了一篇关于如何使用它的一个深度的博客，可悲的是，除非你使用图像，否则enouth不会工作

编辑：

删除了redeyeoperations的旧引用，现在导致其链接农场。
这是一个更轻的版本，它也在第三方网站上，所以它不太可能会下来。

这是代码

HTML

 < div class = tab -container> 
< ul class =tabs clearfix> 
< li> 
< a href =＃>用户< / a> 
< / li> 
< li class = active> 
< a href =＃>待处理的批次< / a> 
< / li> 
< li> 
< a href =＃>附近景点< / a> 
< / li> 
< li> 
< a href =＃>最近拍品< / 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：无; 
 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透明#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透明透明; 
 -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透明#ddd; 
 -webkit-transform：rotate（-48deg）; 
 -moz-transform：rotate（-48deg）; 
 -ms-transform：rotate（-48deg）; 
 -o-transform：rotate（-48deg）; 
 transform：rotate（-48deg）; 
 right：-17px; 
} 
 
 / *清除修复用于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'）; 
}）; 
  




I have been looking for a Google Chrome-like tab written using css but cannot find one.

Sorry, to make sure I am clear, I am trying to replicate the look in order to use it in a web application or a website

解决方案

yeah its possible, with css3

Ive posted a blog about how to its a lil depthy, and sadly enouth not going to work on ie unless you use images

Edit:

Removed old reference to redeyeoperations cause its a link farm now.This is a bit lighter version also it is up on a 3rd party site, so its less likely to be down.

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

Here is the code

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 for tab switching ~ include jquery to get working or visit the codepen

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

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

这篇关于有没有办法使用CSS创建一个类似chrome的选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！