filter：clip-pathでぼかしを使う方法？

Question

私はclip-pathの六角形に影を追加しようとしています。 通常、box-shadow（とfilter:drop-shadow()）はclip-pathでは機能しませんので、その下の大きな擬似要素でエフェクトを偽造しようとしています。 アプローチはhereから採取し、簡単な例ではうまく動作します。ただし、クリップパス六角形で障害が発生したと全く同じアプローチを用いて

body { 
 
    background-color: gray; 
 
} 
 

 
.rectangle { 
 
    margin: 10%; 
 
    position: absolute; 
 
    background: white; 
 
    width: 80%; 
 
    padding-top: 25%; 
 
} 
 

 
.rectangle::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    filter: blur(10px) brightness(20%); 
 
    transform: scale(1.1); 
 
    z-index: -1; 
 
    background-color: black; 
 
}

<div class="rectangle"> 
 
</div>

。私が取得する代わりに

：

body { 
 
    background-color: gray; 
 
} 
 

 
.hexagon { 
 
    width: 20%; 
 
    padding-top: 25%; 
 
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
 
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
 
    -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
 
    position: absolute; 
 
    background: rgb(0, 229, 154); 
 
    margin: 10%; 
 
} 
 

 
.hexagon::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(10px) brightness(20%); 
 
    transform: scale(2.5); 
 
    z-index: -1; 
 
    background-color: black; 
 
}

<div class="hexagon"> 
 
</div>

二つの質問：

このラフスケッチは、所望の効果を示しています

1. どうすればこの作品を作成できますか？
2. クリップパス要素のシャドウを改善するにはどうすればよいでしょうか？

Answer 1

反対のレイアウトが必要です。

容器（この場合、ベース要素に）フィルタが適用されている必要があり、（ここで、擬似）内側部分がクリップ性を有していなければならない：

body { 
 
    background-color: gray; 
 
} 
 

 
.hexagon { 
 
    width: 20%; 
 
    padding-top: 25%; 
 
    filter: drop-shadow(10px 10px 10px red); 
 
    position: absolute; 
 
    margin: 10%; 
 
} 
 

 
.hexagon::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform: scale(2.5); 
 
    z-index: -1; 
 
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
 
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
 
    -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
 
    background: rgb(0, 229, 154); 
 
}

<div class="hexagon"> 
 
</div>