有没有一种方法可以使用CSS创建类似chrome的标签？

是的，用css3

艾夫（Ive）发表了一篇关于如何对其进行深入研究的博客，可悲的是，除非您使用图像，否则诺努斯将无法继续工作

编辑：

删除了对redeyeoperations的旧引用，现在导致其链接服务器场。这是一个较轻的版本，它在第三方站点上也处于启用状态，因此不太可能出现故障。

这是代码

HTML

<div class=tab-container>  <ul  >    <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;}.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; }.clearfix { zoom: 1; }

用于选项卡切换的JS〜包括jquery以开始工作或访问prepen

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