是否可以生成一个遵循剪辑路径多边形形状的盒子阴影？答案

【问题标题】：Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?是否可以生成一个遵循剪辑路径多边形形状的盒子阴影？
【发布时间】：2018-10-06 03:44:26
【问题描述】：

假设我有这个剪辑路径（生成的三角形here）

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

是否可以从此剪辑路径创建盒子阴影？像这样的：

box-shadow: 20px 25px 50px -25px #000;

【问题讨论】：

标签： css

【解决方案1】：

你可以在包含的 div 上使用过滤器，试试：

.container {
   filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.1))
}

例如：https://plnkr.co/edit/kePuv7OLQwawPjiBLg3J?p=preview

【讨论】：

在容器上...所以需要另一个包装器

【解决方案2】：

我假设您的意思是，是否可以沿多边形创建阴影。如果是这样，那么没有。 box-shadow 不幸的是只是一个“盒子”，所以它不能跟随剪辑路径。它仍然适用于元素本身的矩形。

但是，您可以将它与另一个具有相同剪辑但设置在其下方并偏移并创建伪阴影的元素配对：

#box {
  position: relative;
  width: 200px;
  height: 200px;
}

#content {
  width: 100%;
  height: 100%;
  background: #3CF;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
}

#shadow {
  position: absolute;
  z-index: -1;
  content: "";
  background: rgba(0, 0, 0, .5);
  width: 200px;
  height: 200px;
  left: 5px;
  top: 5px;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
}

<div id="box">
  <div id="content"></div>
  <div id="shadow"></div>
</div>

根据您的用例，通过巧妙地使用背景图像、多个边框和/或渐变，您可以使背景看起来介于渐变阴影和不渐变之间。

【讨论】：

【解决方案3】：

我认为这是不可能的。我建议你解决这个问题。

.triangle {
font-size:100px;
color:blue;
text-shadow:0 0 10px black;
}

&lt;span class="triangle"&gt;▲&lt;/span&gt;

【讨论】：