はじめに
clip-pathで作った六角形に、六角形の影(外側)をつけたかった。
けど出来なかった話。
参考
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴
Hexi-Flexi
結論
box-shadow、drop-shadow、擬似要素を使った影
これらではダメだった。
box-shadow
html
<divclass="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:010px25px0rgba(0,0,0,.5);}
そもそも影が出ない。
drop-shadow
同じく影が出ない。
css
.shadow{filter:drop-shadow(30px10px4px#000000);}擬似要素
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
<divclass="hex"></div><divclass="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で切り取ると綺麗な正六角形ができる。
