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

Question

我一直在寻找使用 CSS 编写的类似 Google Chrome 的标签页，但找不到。

我正在尝试复制外观以便在 Web 应用程序或网站中使用它。

Answer 1

是的，用 css3 是可能的

我发布了一篇关于如何深入了解它的博客，遗憾的是除非你使用图像，否则不会在 ie 上工作

编辑:

删除了对 redeyeoperations 的旧引用，导致它现在是一个链接农场。 这是一个更轻量级的版本，它也在第 3 方站点上，因此不太可能出现故障。

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

这是代码

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

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

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; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>