CSS 八角形の作り方

clip-path でオクタゴン（八角形）を作るコードを、実物プレビュー付きでコピーできます。

八角形は clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%) で作れます。ストップ標識やアイコン枠、ボタンの装飾に使えます。横長要素で角を均等に切りたいときはピクセル指定が便利です。下にコピペ用コードを用意しました。

八角形（割合指定）

STOP

CSS

.octagon {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

角を均等に切る（ピクセル指定）

BUTTON

CSS

.octagon-px {
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  -webkit-clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}

ポイントと注意点

関連

clip-path ジェネレーター →ドラッグで微調整 六角形 →ハニカム・アイコン枠 角カット →隅切りのテック系カード