CSS 六角形の作り方

横向き（フラットトップ）

.hexagon {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

縦向き（ポイントトップ）

.hexagon-v {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

ポイントと注意点

• 正六角形の比率：横向きは幅と高さの比をおよそ 1 : 0.866 にすると正六角形に近づきます（例：幅200px × 高さ173px）。
• 画像マスク：img や背景画像の要素に指定すると、画像を六角形に切り抜けます。
• ハニカム配置は六角形を並べ、行ごとに横方向へずらして組みます。形の調整は clip-path ジェネレーター の「正多角形」スライダー（6角）が便利です。

関連