[英]Creating Rating Circles using CSS
我正在尝试创建以下评分圈子:-
我尝试了许多技术,例如在圆内圈,或彼此顶部的圆, z-index
和width
的%
。 但是我没有运气。
使用任何图像在CSS或JavaScript中实现此效果的最佳方法是什么?
作为起点,请看一下:
的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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.