带圆角外边框的选项卡

通过border-radius实现圆角现在变得非常容易。但这只允许我们切入形状。如果我们想用圆形的向外角将一个形状连接到另一个形状，该怎么办？用图形解释更容易

简洁的 HTML

当然，在网络上，几乎任何视觉效果都是可能的。最坏的情况是你可以使用图片。我们的目标，一如既往，是不使用图片（快速！易访问！易于更新！）并使用完全简洁的语义 HTML（快速！易访问！易于更新！）。所以这是标记

<ul class="tabs group">
  <li class="active"><a href="#one">One</a></li> 
  <li><a href="#two">Two</a></li> 
  <li><a href="#three">Three</a></li>
  <li><a href="#three">Four</a></li> 
</ul>

active 类指示哪个选项卡反映当前页面。

实现方式

之所以棘手，是因为我们需要一个形状从选项卡元素中伸出来。为了在保持标记简洁的同时完成此操作，我们将使用伪元素。如果您需要复习，您可以这里和这里了解它们。本质上，它们可以向页面添加额外的元素，我们可以通过 CSS 直接对其进行样式设置。每个元素都可以有两个——:before 和:after。最终我们将每个选项卡使用四个，这是可能的，因为每个选项卡由两个元素组成，列表项和锚链接。

让我们逐步可视化此步骤，暂时不要查看任何代码。

1) 自然状态

2) 浮动

3) 相同大小

4) 只看一个

5) 圆形

6) 正方形

7) 为选项卡和内容着色

8) 为伪元素着色

9) 堆叠

10) 无边框

11) 完成

CSS

这是一大块 CSS 代码，但我已经尝试对其进行注释，以便每个部分都有意义。

.tabs li { 
  /* Makes a horizontal row */
  float: left; 
	
  /* So the psueudo elements can be
     abs. positioned inside */
  position: relative; 
}
.tabs a { 
  /* Make them block level
     and only as wide as they need */
  float: left; 
  padding: 10px 40px; 
  text-decoration: none;
  
  /* Default colors */ 
  color: black;
  background: #ddc385; 
  
  /* Only round the top corners */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px; 
}
.tabs .active {
  /* Highest, active tab is on top */
  z-index: 3;
}
.tabs .active a { 
  /* Colors when tab is active */
  background: white; 
  color: black; 
}
.tabs li:before, .tabs li:after, 
.tabs li a:before, .tabs li a:after {
  /* All pseudo elements are 
     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}
/* Only the first, last, and active
   tabs need pseudo elements at all */
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before, 
.tabs .active a:after, .tabs .active a:before {
  content: "";
}
.tabs .active:before, .tabs .active:after {
  background: white; 
  
  /* Squares below circles */
  z-index: 1;
}
/* Squares */
.tabs li:before, .tabs li:after {
  background: #ddc385;
  width: 10px;
  height: 10px;
}
.tabs li:before {
  left: -10px;      
}
.tabs li:after { 
  right: -10px;
}
/* Circles */
.tabs li a:after, .tabs li a:before {
  width: 20px; 
  height: 20px;
  /* Circles are circular */
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background: #222;
  
  /* Circles over squares */
  z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
  background: #ddc385;
}
/* First and last tabs have different
   outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}

就是这样！

查看演示   下载文件

应该可以在几乎所有像样的浏览器中使用，包括 IE 9 及更高版本。也应该在旧版浏览器中正常回退（只是没有圆角）。

Steve Smith 方法

大约在我创建此内容以将其包含在我关于伪元素的演讲中的同时，Ordered List 的 Steve Smith 发布了一种非常类似的方法。Steve 的方法在选项卡周围有边框，我的方法则将选项卡彼此并排放置。如果你问我，两者都很酷。