大家好 ！
我想在CSS中创建一个小的圆形静态倾角指示器，但找不到解决方案。
左边的平方指示器还可以，但是很不协调，我希望它变圆！
我已经尝试过圆角（请参见屏幕截图右侧的指示器），我想知道是否有可能添加一个圆角遮罩来隐藏角部（参见css3 mask：http://webkit.org/blog/181/css-masks/），但似乎只有这样对于img ...
该解决方案仅适用于Webkit浏览器，因为它适用于移动Web应用程序。
这是我的代码，用于在上图中创建（丑陋的）指示器：
<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;
}
最佳答案
在您的.meter-value类周围添加包装器，将其overflow设置为hidden，然后设置该图层的宽度以获得所需的效果。 .meter-value类上的圆角应保持不变，并为您提供一个流畅的进度指示器。
您将必须将.meter-text div移动到包装器之外，以确保在整个过渡过程中可见该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;
}