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

Question

假设我有这个剪辑路径(这里生成一个三角形)

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

Answer 1

您可以在包含div的过滤器上使用,尝试:

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

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

Answer 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>

根据您的使用情况,通过巧妙地使用背景图像,多个边框和/或渐变,您可以使背景看起来与褪色阴影和不褪色阴影.

Answer 3

我想,这是不可能的.我建议你这个工作.

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

<span class="triangle">?</span>