是否可以生成一個跟蹤剪輯路徑多邊形形狀的盒子陰影？

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