CSSで六角形を作る方法

方法①三角形を入れる
方法②回転変形
1. 通常バージョン
2. 枠線、ラインのみバージョン

方法①三角形を入れる

<div class="hexagon"></div>

.hexagon {
  position: relative;
  width: 100px;
  height: 57.74px;
  background-color: #333;
  margin: 28.87px 0;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.hexagon::before {
  bottom: 100%;
  border-bottom: 28.87px solid #333;
}

.hexagon::after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #333;
}

beforeとafterの疑似要素を使って上部と下部に三角形を作り、それらと中央の長方形が合わさって六角形が完成します。

ここで、高さ、幅、ボーダーの大きさ、そしてマージンは、六角形の各辺が同じ長さになるように計算されています。それぞれの値を変えることで、自由に六角形の大きさを調整することができます。

わかりやすいですが、計算が必要なので、めんどくさいです。

方法②回転変形

通常バージョン

<div class="hexagon"></div>

.hexagon {
    position: relative;
    width: 75px;　　　　/* 変更可能 */
    height: 130px;　　　　/* 変更可能 */
    background: #333;
    transform: rotate(30deg);　　　　/* 回転可能 */
}

.hexagon::before,
.hexagon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
}

.hexagon::before {
    transform: rotate(60deg);
}

.hexagon::after {
    transform: rotate(-60deg);
}

まず、”.hexagon”の部分で、対象要素のスタイルを定義しています。

position: relative; : この要素は相対位置に配置されます。これは、後の ::before と ::after パートで絶対位置が使用されるため重要です。
width: 75px; と height: 130px; : これらは六角形のサイズを指定します。コメントにあるように、これらの値は変更可能です。
background: #333; : 六角形の背景色を設定します。

次に、”.hexagon::before”と”.hexagon::after”部分では、対象要素に2つの疑似要素を追加します。これらの疑似要素は、元の要素と同じ背景色を持ち、同じ大きさに設定されます（inset: 0;とbackground: inherit;により）。

そして、それぞれ60度と-60度に回転させることで、六角形の形状を作り出します。

このように、このCSSコードは主に疑似要素と回転変形を利用して、通常の四角形の要素を六角形に見せるためのものです。

枠線、ラインのみバージョン

背景色を白に指定して、drop-shadow()を使って六角形に周囲に微妙な影を追加します。

それ以外は同じです。

.hexagon {
    position: relative;
    width: 150px;
    height: 260px;
    background: #fff;
    transform: rotate(30deg);
    filter: drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333);
}

.hexagon::before,
.hexagon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
}

.hexagon::before {
    transform: rotate(60deg);
}

.hexagon::after {
    transform: rotate(-60deg);
}