Stelle di voto

Mostrare una valutazione e raccoglierla: la media con la ripartizione dei voti, il voto a cinque stelle e quello con le mezze stelle. Le stelle sono tutte la stessa forma, riempita più o meno da una sola variabile CSS.

Valutazione media

4,6

128 recensioni

  • 5 stelle72%
  • 4 stelle19%
  • 3 stelle6%
  • 2 stelle2%
  • 1 stella1%

Dati di fantasia

Voto a cinque stelle

Com’è andata la consegna?

Tocca una stella

Mezze stelle

3,5 su 5

Tutte e tre le varianti leggono una variabile --value: la riga delle stelle piene è ritagliata con clip-path: inset(), quindi 4,6 stelle sono davvero 4 piene e il 60% della quinta. Il voto a cinque stelle usa veri <input type="radio"> (frecce della tastiera comprese); le mezze stelle un <input type="range"> nascosto sotto.