CSS 五角形の作り方

clip-path でペンタゴン・ホームベース型を作るコードを、実物プレビュー付きでコピーできます。

正五角形は clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%) で作れます。右端が尖ったホームベース型はタグやステップ表示に便利です。下にコピペ用コードを用意しました。

正五角形（ペンタゴン）

5

CSS

.pentagon {
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  -webkit-clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

ホームベース型（タグ・矢羽根）

STEP 1

CSS

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

ポイントと注意点

正五角形のバランス：要素を正方形（幅=高さ）にすると整った五角形になります。
矢羽根（フロー）：ホームベース型を横に並べ、左端を少しずらすと進捗ステップの矢羽根になります。
文字の余白：尖った側は内側が削れるので padding-right を多めにとると文字が切れません。微調整は clip-path ジェネレーターが便利です。

関連