Question

我需要做一个健康的＆＃39;项目的进度条，其中绿色表示填充的数据，红色表示空数据。当红色部分为50％时，我得到一个漂亮的圆圈，但是一旦该值变为其他任何东西，边界半径都会搞砸..

这就是我现在所拥有的：

HTML：

<div id="progressWrap">
    <span class="progressRed"></span>
</div>

CSS：

#progressWrap {
  width: 50px;
  height: 50px;
  display: block;
  background-color: forestgreen;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%; 
  border-radius: 100%;
}
.progressRed {
    width: 50%;
    height: 50px;
    float: right;
    background-color: red;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}

http://jsfiddle.net/q48Qf/

使用Jquery，progressRed类的宽度值将是动态的，也许我可以改变border-radius以使其再次适合progressWrap？我不知道如何计算那种情况下所需的边界半径。

非常感谢任何帮助！

Answer 1

红色部分不需要边框半径。因为它完全包裹在绿色圆圈中，所以更容易让它保持正方形并隐藏父母的溢出。

在父（绿色）部分设置overflow: hidden，并从红色中删除半径。

示例：http://jsfiddle.net/q48Qf/3/

在圆圈中制作进度条

1 个答案: