Как реализовать данный рейтинг звезд?

Question

может кто писал, или даже плагин ( но именно с такими звездами, по скругленности)

суть в том, чтобы можно была задать стили заполняемости (например style="50%") закрасится только половина, 2 с половиной цифры)

Answer 1

Ну это же совсем элементарно...

.stars{
  color: gold;
  font-size: 5em;
  display: inline-block; /* это чтобы размер блока подстраивался под контент */
}
.stars .inner{ 
  overflow: hidden; /* скрывать всё, что за границей блока */
}

<div class="stars"><div class="inner" style="width: 50%">★★★★★</div></div>

Можно так

.stars{
  color: gold;
  font-size: 5em;
  display: inline-block;
}
.stars span{
  position: absolute;
}
.stars span::before {
   content: "☆☆☆☆☆";
}
.stars .inner{ 
  overflow: hidden;
}

.stars .inner::before {
  content: "★★★★★";
}

<div class="stars"><span></span><div class="inner" style="width: 50%"></div></div>

БЛОГ НА HUSL

Как реализовать данный рейтинг звезд?

Ответы (1 шт):