仅使用 CSS 显示圆形倾倒指示器

Question

大家好！

我想在 CSS 中创建一个小的圆形静态 pourcent 指示器，但我找不到解决方案。 左边的平方指​​标还可以，但是太丑了，我要圆！

我尝试过圆角（cf 屏幕截图右侧的指示符），我想知道是否有可能添加圆角蒙版来隐藏角（cf.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 类周围添加一个包装器，将其overflow 设置为hidden，然后设置该层的宽度以获得所需的效果。 .meter-value 类上的圆角应该保持原样，并为您提供一个流畅的进度指示器。

您必须将 .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 的类可能如下所示：

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