如何为选中的标签页（tab）绘制下图所示的特殊边框效果

实现思路 #

这种带反向圆角、底部和内容区边框连通的效果，可通过纯CSS结合伪元素实现，无需引入额外图片或SVG资源，核心逻辑如下：

• 给标签栏+内容区整体套一层父容器，设置整体外边框
• 选中标签的背景色与下方内容区背景色保持一致，设置更高的z-index盖住父容器的上边框，实现视觉上的连通效果
• 用::before和::after两个伪元素，分别定位在选中标签的左下角和右下角，绘制向内凹陷的反向圆角

完整代码示例 #

<div class="tab-wrapper">
  <!-- 标签栏 -->
  <div class="tab-header">
    <div class="tab-item active">标签1</div>
    <div class="tab-item">标签2</div>
    <div class="tab-item">标签3</div>
  </div>
  <!-- 内容区 -->
  <div class="tab-content">
    标签1对应的内容
  </div>
</div>

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.tab-wrapper {
  width: 600px;
  margin: 20px auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.tab-header {
  display: flex;
  background-color: #f3f4f6;
  height: 40px;
}
.tab-item {
  padding: 0 24px;
  line-height: 40px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
/* 选中态样式 */
.tab-item.active {
  background-color: #ffffff;
  color: #165dff;
  z-index: 10;
}
/* 左下角反向圆角 */
.tab-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-bottom-right-radius: 8px;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-left: none;
  background-color: transparent;
}
/* 右下角反向圆角 */
.tab-item.active::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-bottom-left-radius: 8px;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-right: none;
  background-color: transparent;
}
.tab-content {
  padding: 24px;
  background-color: #ffffff;
  min-height: 200px;
}

关键参数说明 #

• 反向圆角的半径可根据设计需求调整，注意伪元素的宽高、圆角半径、偏移量要保持一致
• 边框颜色需和父容器的边框颜色完全相同，才能实现无缝衔接的视觉效果
• 如果标签栏有间距，可调整伪元素的左右偏移量适配布局

内容的提问来源于stack exchange，提问作者rohit