将“盒子阴影”和裁剪路径一起使用

让我们一步步地介绍一下，在这种情况下，您似乎无法做到的事情，但仍然可以使用 CSS 技巧来完成。 在这种情况下，我们将为形状应用阴影。

您制作了一个盒子

.tag {
  background: #FB8C00;
  color: #222;
  font: bold 32px system-ui;
  padding: 2rem 3rem 2rem 4rem;
}

您将它塑造成一个漂亮的标签形状

您使用 clip-path，因为它非常适合这个。

.tag {
  /* ... */
  clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%)
}

您想给它一个阴影，所以您…

尝试使用 box-shadow。

.tag {
  /* ... */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

但是它不起作用。 什么都没有显示出来。 您认为自己疯了。 您假设自己的语法错误。 您没有错。 问题是 clip-path 将其切掉了。

您可以改为为父元素投射阴影

有一个过滤器也执行阴影：drop-shadow()。 但是您不能直接在元素上使用它，因为 clip-path 也会将其切断。 因此您创建一个父级

<span class="tag-wrap">
  <span class="tag">
    Tag
  </span>
</span>

您也不能在该父级上使用 box-shadow，因为父级仍然是一个矩形，阴影看起来会很奇怪。 但是您可以使用 filter，阴影将遵循形状。

查看 Pen
形状上的阴影 by Chris Coyier (@chriscoyier)
on CodePen.

就是这样。