如何用CSS实现带圆角与轮廓阴影的标签形状？

针对你提到的常规border三角无法添加box-shadow的问题，这里提供两种可行的解决思路：

方法1：伪元素 + filter: drop-shadow() #

利用CSS滤镜的drop-shadow特性，它会识别元素及其伪元素的整体轮廓（包括border绘制的三角），从而给整个标签添加统一阴影：

HTML结构 #

<div class="tag">示例标签</div>

CSS样式 #

.tag {
  position: relative;
  display: inline-block;
  padding: 6px 16px;
  background-color: #ffffff;
  border-radius: 4px 0 0 4px;
  /* 用drop-shadow替代box-shadow */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 用border绘制右侧尖角 */
.tag::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  /* 三角尺寸与标签高度匹配 */
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 12px solid #ffffff;
}

说明：drop-shadow会跟随元素的真实形状（包括伪元素的三角）生成阴影，完美解决border三角无法继承box-shadow的问题。

方法2：clip-path 绘制整体形状 #

直接用clip-path定义标签的完整形状（包括尖角），之后可以直接添加常规的box-shadow：

CSS样式 #

.tag {
  display: inline-block;
  padding: 6px 28px 6px 16px;
  background-color: #ffffff;
  /* 直接添加常规box-shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 绘制带右侧尖角的多边形路径 */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

说明：这种方法无需伪元素，直接通过路径定义形状，box-shadow会作用于整个路径轮廓。缺点是clip-path的兼容性略低于滤镜，但现代主流浏览器均已支持。

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