2

Подскажите, пожалуйста, можно ли с помощью css нарисовать такую фигуру звезды?
введите сюда описание изображения
Спасибо!

3
  • 2
    иконка не подойдёт?
    – diralik
    23 дек 2017 в 10:37
  • 3
    мне казалось, что вы могли просто не подумать о том, что можно использовать иконки, вот я и написал. если мой комментарий такой лишний, то извините, пожалуйста. к тому же, по идее, ответы должны быть полезны не только автору, но и другим людям, вполне может быть, что им иконка может подойти
    – diralik
    23 дек 2017 в 14:34
  • 3
    @LADYX нелогично. В вопросе нет я знаю такие-то способы, но мне нужен именно и только css. Вполне логично как раз предположить, что вы не в курсе, что есть решения без извращений с полигонами. 23 дек 2017 в 15:00

2 ответа 2

8

Вариант на css. Данный пример не будет работать в IE и EDGE

* {
  box-sizing: border-box;
}

.stars {
  text-align: center;
}

.star {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(197, 196, 196, 1) 0%, rgba(180, 179, 178, 1) 100%);
  position: relative;
}

.star:before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
  background: linear-gradient(to bottom, rgba(221, 220, 219, 1) 0%, rgba(209, 208, 206, 1) 100%);
  z-index: 1;
}

.star,
.star:before {
  -webkit-clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%);
  clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%);
}

.star:hover {
  background: linear-gradient(to bottom, rgba(224, 194, 75, 1) 0%, rgba(207, 125, 0, 1) 100%);
}

.star:hover:before {
  background: linear-gradient(to bottom, rgba(243, 212, 85, 1) 0%, rgba(238, 164, 0, 1) 100%);
}
<div class="stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

0
4

Как вариант можно воспользоваться этим

Вот тут отличная статья как реализовать то что ты наверное хочешь

А вот тут как это реализованно

.star-rating {
  font-size: 0;
}

.star-rating__wrap {
  display: inline-block;
  font-size: 1rem;
}

.star-rating__wrap:after {
  content: "";
  display: table;
  clear: both;
}

.star-rating__ico {
  float: right;
  padding-left: 2px;
  cursor: pointer;
  color: #FFB300;
}

.star-rating__ico:last-child {
  padding-left: 0;
}

.star-rating__input {
  display: none;
}

.star-rating__ico:hover:before,
.star-rating__ico:hover~.star-rating__ico:before,
.star-rating__input:checked~.star-rating__ico:before {
  content: "\f005";
}
<html>

<head>
  <meta charset="utf-8">
  <title>star rating with CSS and font-awesome</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
  <div class="star-rating">
    <div class="star-rating__wrap">
      <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
      <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
      <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
      <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
      <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
      <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
      <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
      <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
      <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
      <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
    </div>
  </div>
</body>

</html>

0

Ваш ответ

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

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