僅顯示 CSS 的整數百分比指示器

Question

大家好 ！

我想在 CSS 中創建一個小圓 static 百分比指標，但我找不到解決方案。 左邊的方形指示器還可以，但是太丑了，我想要它是圓的！

我試過圓角（參見屏幕截圖右側的指示器），我想知道是否可以添加一個圓角掩碼來隱藏角（參見 css3 掩碼： http://webkit.org/blog/181 /css-masks/ ），但它似乎只適用於 img ...

該解決方案只能在 webkit 瀏覽器上工作，因為它適用於移動 webapp。

這是我在上圖中創建（丑陋的）指標的代碼：

<div class="meter-wrap">
     <div class="meter-value" style="background-color: #489d41; width: 70%;">
            <div class="meter-text"> 70 % </div>
     </div>
</div>

和 css：

.meter-wrap{
    position: relative;
}
.meter-value {
 
 background-color: #489d41;
 
}
.meter-wrap, .meter-value, .meter-text {
    width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
    background: #bdbdbd top left no-repeat;
}          
.meter-text {
    position: absolute;
    top:0; left:0;
    padding-top: 2px;         
    color: #000;
    text-align: center;
    width: 100%;
 font-size: 40%;
 text-shadow: #fffeff 1px 1px 0;
}

Answer 1

在.meter-value class 周圍添加一個包裝器，將其overflow設置為hidden ，然后設置該層的寬度以獲得所需的效果。 .meter-value class 上的圓角應保持完整，並為您提供流暢的進度指示器。

您必須將.meter-text div 移到包裝器之外，以確保它在整個轉換過程中可見，因此您的 html 會喜歡以下內容：

<div class="meter-wrap">    
    <div class="meter-text"> 70 % </div>  
    <div class="meter-value-wrapper" style="width:70%;">
        <div class="meter-value" style="background-color: #489d41;">
    </div>
</div>

.meter-value-wrapper的 class 可能如下所示：

.meter-value-wrapper { 
    overflow: hidden;
    width: 30px; 
    height: 30px;
}