どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで6角形の作り方について
CSSだけで6角形を作ります。6角形は英語でヘキサゴン！
8角形も似たような方法で作ったのでよければ見てってください。
cssだけで6角形を作る
index.html
<divclass="hexagon"><divclass="hexagon_frame"></div></div>style.css
.hexagon{width:69px;height:80px;background:#000;/* 6角形の色 */position:relative;}.hexagon::before{content:'';width:0;height:0;border-top:10pxsolid#fff;border-left:17pxsolid#fff;border-bottom:10pxsolidtransparent;border-right:17pxsolidtransparent;position:absolute;top:0;left:0;}.hexagon::after{content:'';width:0;height:0;border-top:10pxsolid#fff;border-left:17pxsolidtransparent;border-bottom:10pxsolidtransparent;border-right:17pxsolid#fff;position:absolute;top:0;right:0;}.hexagon_frame::before{content:'';width:0;height:0;border-top:10pxsolidtransparent;border-left:17pxsolid#fff;border-bottom:10pxsolid#fff;border-right:17pxsolidtransparent;position:absolute;bottom:0;left:0;}.hexagon_frame::after{content:'';width:0;height:0;border-top:10pxsolidtransparent;border-left:17pxsolidtransparent;border-bottom:10pxsolid#fff;border-right:17pxsolid#fff;position:absolute;bottom:0;right:0;}結果
この方法でハニカム構造にするにはちょっとしんどいかも。できなくはないが・・・
もう一つ疑似要素を使った方法
index.html
<divclass="hexagon"></div>style.css
.hexagon{width:70px;height:40px;background:#000;position:relative;}.hexagon::before{content:'';width:0;height:0;border-top:0solidtransparent;border-left:35pxsolidtransparent;border-bottom:20pxsolid#000;border-right:35pxsolidtransparent;position:absolute;top:-20px;left:0;}.hexagon::after{content:'';width:0;height:0;border-top:20pxsolid#000;border-left:35pxsolidtransparent;border-bottom:0solidtransparent;border-right:35pxsolidtransparent;position:absolute;bottom:-20px;left:0;}結果
まとめ
どちらの方法も擬似要素を使った方法です。
1つ目の方法は、背景と同じ色の三角形で削り取って6角形に見せかけている方法。
2つ目の方法は、逆に四角形に三角形を2つ上下に重ね、6角形に見せかけている方法。
どちらもだいたい6角形に見えるだけで、数値的には正6角形ではありませんが、WEBで使用する分にはさほど問題ないと思います。
おまけ
2つ目の方法でハニカム構造を作ってみた。
画像
index.html
<ul><li><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div></li><li><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div></li><li><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div></li></ul>style.css
ulli{margin-bottom:15px;list-style:none;}ulli:nth-child(odd){margin-left:-36px;}.hexagon{width:70px;height:40px;background:#000;position:relative;margin-right:2px;display:inline-block;/* 追記 */}.hexagon::before{content:'';width:0;height:0;border-top:0solidtransparent;border-left:35pxsolidtransparent;border-bottom:20pxsolid#000;border-right:35pxsolidtransparent;position:absolute;top:-20px;left:0;}.hexagon::after{content:'';width:0;height:0;border-top:20pxsolid#000;border-left:35pxsolidtransparent;border-bottom:0solidtransparent;border-right:35pxsolidtransparent;position:absolute;bottom:-20px;left:0;}おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
[参考]
https://spyweb.media/2017/12/21/css-responsive-hexagon/
https://qiita.com/cotolier_risa/items/96992b5e2561dc8cbaa3