【css】clip-pathに影をつける(出来た)

はじめに

clip-pathで作った六角形に、六角形の影(外側)をつけたかった。
~~けど出来なかった話。~~出来た。

参考
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴
Hexi-Flexi

結論

box-shadow、drop-shadow、擬似要素を使った影
これらではダメだった。
drop-shadowで出来ました。

box-shadow

html

<div class="hex shadow"></div>

css

.hex {
    background-color: cornflowerblue;
    position: relative;
    height: 400px;
    width: 347.23416px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.shadow {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

そもそも影が出ない。

drop-shadow

同じく影が出ない。

html

<div class="shadow">
    <div class="hex"></div>
</div>

css

.shadow {
    filter: drop-shadow(30px 10px 4px #000000);
}

filterの使い方を間違えていた。
親要素にdrop-shadowをつけたら出来ました。

擬似要素

css

.shadow::after {
    content: '';
    z-index: -1;
    background-color: #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    filter: blur(150px);
    transform: translate(10%, 10%) scale(1.05);
}

clip-pathに切り取られて外に出れない。
z-indexも仕事していない。

結局 出来たから結局ではない

影を外付けにした。
z-indexを効かせるためだけに。

html

<div class="hex"></div>
<div class="shadow"></div>

css

.shadow {
    content: '';
    z-index: -1;
    background-color: #000000;
    display: block;
    position: absolute;
    top: 0px;
    left:0px;
    height: 400px;
    width: 347.23416px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    filter: blur(150px);
    transform: translate(10%, 10%) scale(1.05);
}

• 親子じゃないからたくさん直打ち設定しないといけない
  • top、left、height、width、六角形にするためのclip-path
• clip-pathに切り取られてブラーもほぼ仕事してない

影はついたが望まぬ形だったため使えなかった、諦め。

おわり

正六角形の 長い方(今回は高さ):短い方(今回は幅)は2:√3。
なので2:√3の長方形を用意してそれをclip-pathで切り取ると綺麗な正六角形ができる。