使用CSS创建评级圈

Question

我正在尝试创建评分圈，例如： -

我尝试了很多技巧，比如圆圈内的圆圈，或者在z-index中使用不同的width和%在彼此的顶部圈起来。但我没有运气。

使用任何图像在CSS或JavaScript中实现此功能的最佳方法是什么。

Answer 1

通过一个起点，看看：

Demo Fiddle

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%;
}