如何使用CSS制作此进度条？

Question

我可以仅使用CSS制作下面的进度条,即不使用任何图像吗？在第二种情况下,可以围绕div左侧的绿色圆角而不是围绕右侧的圆角.但是,是否有第一种和第三种情况的解决方案而不诉诸外部图像？

请注意,应该是从完全空的条到完全绿色的平滑过渡.

Answer 1

Css Tricks有一篇很好的文章展示了如何实现这一目标.

例

回复:评论
看起来非常接近我
注意我已经改变了span元素的宽度.

最后更新
OP希望它看起来更像他的榜样

在演示中更改以下两行CSS

.meter {
    background: none repeat scroll 0 0 #555555;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3) inset;
    height: 40px;
    margin: 60px 0 20px;
    overflow: hidden; /* remove padding and add me */
    position: relative;
}
.meter > span {
    background-color: #2BC253;
    background-image: -moz-linear-gradient(center bottom , #2BC253 37%, #54F054 69%);
    border-radius: 20px 0px 0px 20px; /* change me */
    box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
}

Answer 2

如果您将绿色条放在灰色容器内并overflow: hidden放在灰色容器上,那么当您给容器圆角时,绿色条将被剪裁.