【初心者でもわかる】CSSだけで8角形を作る方法

【初心者でもわかる】CSSだけで8角形を作る方法

どうも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した時、くるくる回転させるとかやってみたい。

おそまつ!