如何用纯CSS实现类似Chrome标签与下方栏的圆角衔接效果

我们可以通过CSS伪元素构造标签页左右下角的过渡圆角，不需要额外DOM，纯CSS即可实现效果：

完整实现代码 #

CSS部分

/* 假设页面背景为白色，可根据实际背景调整对应值 */
body {
  background: #fff;
}

#bar {
  width: 200px;
  height: 50px;
  background-color: gray;
}

.tab {
  position: relative;
  width: 75px;
  height: 25px;
  background-color: lightgray;
  border-radius: 8px 8px 0 0;
  margin-left: 1rem;
  cursor: pointer;
}

/* 选中状态的标签和下方栏背景统一 */
.tab.active {
  background-color: gray;
}

/* 左右下角的过渡圆角伪元素 */
.tab.active::before,
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  background: #fff; /* 和页面背景色保持一致 */
}

.tab.active::before {
  left: -8px;
  border-bottom-right-radius: 8px;
}

.tab.active::after {
  right: -8px;
  border-bottom-left-radius: 8px;
}

.flex {
  display: flex;
}

HTML部分

<div class="flex">
  <div class="tab active"></div>
  <div class="tab"></div>
</div>
<div id="bar"></div>

实现逻辑 #

• 选中标签的背景和下方#bar颜色保持一致，视觉上形成连贯区域
• 伪元素通过绝对定位固定在选中标签的左右下角，用和页面背景一致的颜色填充，只设置对应方向的圆角，刚好填补标签和下方栏衔接处的直角缺口，模拟出Chrome的圆角过渡效果
• 圆角半径可以根据实际需求调整，只要伪元素的宽高、偏移量和圆角半径保持一致即可适配

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