ul.rating{ margin:0; }
ul.rating li div{ width:100%; height:100%; background:#ccc; /* https://bennettfeely.com/clippy/ */
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
ul.rating{ display:flex; list-style-type:none; padding:0; }
ul.rating li{ width:25px; height:25px; }
ul.rating li.hovered div{ background:grey !important; }

.rate-1 li:nth-child(-n+1) div{ background:gold; }
.rate-2 li:nth-child(-n+2) div{ background:gold; }
.rate-3 li:nth-child(-n+3) div{ background:gold; }
.rate-4 li:nth-child(-n+4) div{ background:gold; }
.rate-5 li:nth-child(-n+5) div{ background:gold; }