0

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

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

введите сюда описание изображения

1 ответ 1

5

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

.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>

8
  • спасибо, но вроде чуть звездочки не такие
    – flowers
    11 ноя 2021 в 21:46
  • скругления.....
    – flowers
    11 ноя 2021 в 21:49
  • это что-то вроде символов эмодзи из UTF-8. Они могут различаться в разных шрифтах.
    – DiD
    11 ноя 2021 в 21:50
  • Вы можете использовать любой шрифт. Можно например font-awesome: star-solid, star-regular, star-half-alt, star-half
    – DiD
    11 ноя 2021 в 21:58
  • 1
    @flowers, шрифты на странице вы задаёте сами, через CSS это делается, например, так { font-family: "Times New Roman"; }
    – DiD
    11 ноя 2021 в 22:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.