[英]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.