Tell me, please, is it possible to draw such a star shape using css?
enter image description here
Thank!

  • 2
    icon does not fit? - diraria
  • @diraria if the icon came up, I would not ask this question. Is it logical :) - LADYX
  • @HamSter not, not worth it, neither one nor the other. - LADYX
  • 3
    It seemed to me that you could simply not think that you can use the icons, so I wrote. if my comment is so superfluous, then please excuse me. besides, in theory, the answers should be useful not only to the author, but also to other people, it may well be that the icon may suit them - diraria
  • 3
    @LADYX is illogical. The question is no, я знаю такие-то способы, но мне нужен именно и только css . It is logical to just assume that you do not know that there are solutions without distortions with polygons. - Maxim Stepanov

2 answers 2

Option on css. This example will not work in IE and 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>

  • Yes it is. Thank! Good luck to you! - LADYX

As an option, you can use this

Here is a great article on how to implement what you probably want.

And here is how it is implemented

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

  • RIM neither one nor the other, nor the third does not suit me. - LADYX