html - CSS:不等边三 Angular 形伪元素上的盒阴影效果

Question

我正在尝试在作为伪元素存在的不等边三 Angular 形周围创建一个框阴影，如下所示。我尝试了很多方法，但似乎无法在我的图像下方获得均匀的阴影。

我尝试放置第二个尺寸稍大的灰色不等边三 Angular 形伪元素，但由于没有渐变或阴影效果，这不是我想要的。

有没有人有解决办法？

非常感谢一些想法；也许有一种方法可以在第二个伪元素上获得边框渐变效果并将其置于底层？

.box {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}

.box:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-left: 20px solid transparent;
  border-right: 80px solid transparent;
  border-top: 30px solid blue;
}

<div style='width: 300px;height:300px;background: white;'>
  <div class='box'>
  </div>
</div>

Answer 1

您要找的是filter !

filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));

在元素的可见部分周围映射阴影，而不是它的框。

请注意，此属性与 Microsoft 的旧版“过滤器”属性有很大不同且不兼容。