Question

我正在尝试围绕作为伪元素存在的斜角三角形创建一个框阴影，如下所示。我尝试了很多方法，但似乎无法在我的图像下面得到一个均匀的阴影。

我尝试过第二个含有较大尺寸灰度的斜角三角形伪元素，但由于没有渐变或阴影效果，所以它不是我想要的。

有没有人有任何解决方案？

真的很感激一些想法;也许有一种方法可以在第二个伪元素上获得边界渐变效果并为其提供支撑？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您正在寻找的是filter！

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

将阴影映射到元素的可见部分，而不是其框。

请注意，此属性与Microsoft较旧的“过滤器”属性明显不同并且不兼容。

Answer 2

你可以看看我做过的这个小提琴：https://jsfiddle.net/1fwrn3wh/1/。

您需要执行的步骤：

添加一个：之前伪元素，其大小相同：在元素之后
轻微移动：元素向下之前
添加模糊方面的过滤器

然后它就像阴影一样;）

为了便于快速编辑，您可以将此CSS添加到您的文件中：

.box:before {
  content: '';
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  border-left: 20px solid transparent;
  border-right: 80px solid transparent;
  border-top: 30px solid rgba(0, 0, 0, 0.5);
  filter: blur(2px);
}

然后更改原始框的框阴影：

box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);

欢呼;）

CSS：对Scalene三角形伪元素的盒子阴影效果

2 个答案: