I am trying to create Rating circles like:-
I have tried many techniques like circle within circle, or circle at the top of each other with different z-index
and width
in %
. But I'm having no luck.
What will be the best way to implement this in CSS or JavaScript with using any image.
By way of a starting point, have a look at:
HTML
<div class='circle'></div>
<div class='circle25'></div>
<div class='circle50'></div>
<div class='circle75'></div>
<div class='circle100'></div>
CSS
div[class^=circle] {
background:white;
border-radius:100%;
display:inline-block;
height:20px;
width:20px;
overflow:hidden;
position:relative;
}
div[class^=circle]:after {
content:'';
position:absolute;
display:block;
height:100%;
left:0;
background:orange;
}
div.circle25:after {
width:25%;
}
div.circle50:after {
width:50%;
}
div.circle75:after {
width:75%;
}
div.circle100:after {
width:100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.