Как нарисовать фигуру звезды на css?

269

25 декабря 2017, 11:17

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

Спасибо!

Answer 1

Вариант на 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>

Answer 2

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

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

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

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