如何仅用CSS实现该气泡式Tab背景样式？

你需要实现的是带有右下角缺口的深色标签背景样式，以下是修正后的代码及说明：

原问题代码 #

ul.tabs li {
 display: inline-block;
 position: relative;
 margin: 0 0 0 5px;
 padding-left:0;
 padding: 0.625rem 1.3rem;
 background: #000;
 border-radius: 25px 25px 0 25px;
 cursor: pointer;
}
ul.tabs li:after {
 content: '';
 height: 20px;
 width: 20px;
 background: transparent;
 position: absolute;
 bottom:0;
 right: -5px;
 border-radius: 10px 10px 10px 10px;
 box-shadow: 0 10px 0 0 #000;
}
ul.tabs li a {
  font-family: timeburner;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 18px;
  letter-spacing: 2px;
  text-decoration: none;
}

修正后的代码 #

ul.tabs li {
  display: inline-block;
  position: relative;
  margin: 0 0 0 5px;
  padding: 0.625rem 1.3rem;
  background: #000;
  border-radius: 25px 25px 0 25px;
  cursor: pointer;
}

ul.tabs li:after {
  content: '';
  width: 25px;
  height: 25px;
  /* 此处颜色需与页面背景色一致，示例为白色 */
  background: #fff;
  position: absolute;
  bottom: 0;
  right: -25px;
  border-radius: 0 0 0 25px;
}

ul.tabs li a {
  font-family: timeburner;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 18px;
  letter-spacing: 2px;
  text-decoration: none;
  /* 增加文字颜色，确保在黑色背景上可见 */
  color: #fff;
}

关键调整说明 #

• 替换原代码中用box-shadow模拟缺口的方式，改用与页面背景色一致的伪元素覆盖标签右下角，形成自然的缺口效果
• 伪元素尺寸设为与标签圆角半径一致的25px，位置调整为bottom:0、right:-25px，刚好衔接标签右下角
• 伪元素的border-radius设为0 0 0 25px，让左上角圆角与标签的右下角完美匹配
• 补充了文字颜色，确保在黑色标签背景上清晰可见

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