如何仅用CSS创建指定形状？右上角圆角实现遇阻求助

问题分析 #

你当前的代码尝试用两个伪元素模拟右上角圆角，但透明圆形的方式无法形成自然的圆角衔接，核心原因是没有正确利用圆角属性和伪元素定位。

修正方案（向外延伸的圆角效果） #

去掉多余的span:after，仅通过li:after伪元素即可实现需求效果：

ul.rounded-tabs li {
  display: inline-block;
  background: #ccc;
  margin: 0 40px;
  padding: 0.625rem 2rem;
  position: relative;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  overflow: visible;
}

ul.rounded-tabs li:after {
  content: '';
  width: 50px;
  height: 50px;
  background: #ccc;
  position: absolute;
  top: -25px;
  right: -25px;
  border-top-right-radius: 25px;
  z-index: -1;
}

原理说明 #

• 伪元素设为正方形，通过border-top-right-radius: 25px保留右上角圆角，形成1/4圆结构。
• top: -25px和right: -25px的定位，让这个1/4圆的底部与li顶部对齐、左侧与li右侧对齐，完美填补li的右上角区域。
• z-index: -1确保伪元素不会遮挡li内的文字内容。

简化方案（li自身右上角为圆角） #

如果你的需求是li本身的右上角为圆角（而非向外延伸），直接给li添加对应圆角属性即可：

ul.rounded-tabs li {
  display: inline-block;
  background: #ccc;
  margin: 0 40px;
  padding: 0.625rem 2rem;
  position: relative;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px; /* 添加右上角圆角 */
  cursor: pointer;
}

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