どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで8角形の作り方について
ちょっと凝ったデザインにするときに役立つtipsを紹介。
CSSだけで8角形を作ります。jsで動きとかつけたらおしゃれなサイト作れそう。
cssだけで8角形を作る
index.html
<div class="octagon">
<div class="octagon_frame"></div>
</div>
style.css
.octagon {
width: 240px;
height: 240px;
position: relative;
background: #ccf; /* 8角形の色or画像 */
}
.octagon::before {
content: '';
width: 0;
height: 0;
border: 35px solid transparent;
border-top-color: #fff;
border-left-color: #fff;
position: absolute;
top: 0;
left: 0;
}
.octagon::after {
content: '';
width: 0;
height: 0;
border: 35px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
position: absolute;
top: 0;
right: 0;
}
.octagon_frame::before {
content: '';
width: 0;
height: 0;
border: 35px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
position: absolute;
bottom: 0;
left: 0;
}
.octagon_frame::after {
content: '';
width: 0;
height: 0;
border: 35px solid transparent;
border-bottom-color: #fff;
border-right-color: #fff;
position: absolute;
bottom: 0;
right: 0;
}
結果
画像も入れれます。
いっぱい並べておしゃれな背景にも。
疑似要素を計4つ使い、四隅に背景色と同じ色を配置することで8角形に見せています。
三角形の大きさの計算ですが、borderの数字は大体横幅の7分の1くらいの数字を入れると、ほぼほぼきれいな8角形に見えます。
まとめ
マウスカーソルでhoberした時、くるくる回転させるとかやってみたい。