レビューの星評価に使えますか？

はい。星型に切り抜いた要素を並べ、背景色やグラデーションの幅で評価の割合を表現できます。

星が縦長・横長になってしまいます

clip-pathの座標は要素サイズに比例するため、要素を正方形にすると整った星になります。

CSS 星（スター）の作り方｜clip-pathで五つ星マーク（コピペ）

星型は clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) で作れます。10個の頂点（外側5・内側5）で五つ星になります。レビュー評価のスターやバッジに画像なしで使えます。下にコピペ用コードを用意しました。

五つ星

CSS

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

六芒星（star of david）

CSS

.star-6 {
  clip-path: polygon(50% 0%, 63% 25%, 100% 25%, 75% 50%, 100% 75%, 63% 75%, 50% 100%, 37% 75%, 0% 75%, 25% 50%, 0% 25%, 37% 25%);
  -webkit-clip-path: polygon(50% 0%, 63% 25%, 100% 25%, 75% 50%, 100% 75%, 63% 75%, 50% 100%, 37% 75%, 0% 75%, 25% 50%, 0% 25%, 37% 25%);
}

ポイントと注意点

正方形で使う：要素を正方形にすると整った星になります（縦横が違うと伸びます）。
星評価：星を並べ、背景の塗り幅で評価の割合（例：☆3.5）を表現できます。
微調整は clip-path ジェネレーターの「星」プリセットから頂点をドラッグできます。

CSS 星の作り方

五つ星

CSS

六芒星（star of david）

CSS

ポイントと注意点

関連