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

Question

比方说，我有这样的剪辑路径（三角形生成here）

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

是否有可能建立从这个剪辑路径的box-shadow？ 类似这样的：

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

Answer 1

我假设你的意思，是有可能创造沿多边形的影子。如果是这样，那么不。不幸的是，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 2

我认为这是不可能的。我会建议你这个解决方法。

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

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

Answer 3

您可以在包含分区使用过滤器，请尝试：

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

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