クリップパスポリゴンの形状に沿ったボックスシャドーを生成することは可能ですか？

Question

だが、私はこのクリップパス（三角形がhereを生成）

-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

私はあなたが意味すると仮定しています、それは多角形に沿って影を作成することが可能です。もしそうなら、いいえ。 box-shadowは残念なことに "ボックス"だけなので、クリップのパスに従うことはできません。それは要素自体の矩形にも適用されます。

あなたはしかし、同じクリッピングを持っていますが、それ以下に設定し、オフセットおよび擬似影を作成している別の要素とペアリングでき

：あなたのuse-によって

#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

あなたが含むdiv要素にフィルタを使用することができ、試してみてください。

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

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