どうも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;
}

結果