只能使用CSS,即不使用任何图像,我可以在下面进行进度条吗？在第二种情况下,可以围绕div左侧的绿色角落,而不是在右侧.但是,在不使用外部图像的情况下,是否可以解决第一种情况和第三种情况？
请注意,从酒吧完全空白到完全绿色应该有一个平稳的过渡.
解决方法
Css Tricks有一篇很好的文章,显示如何实现这一点.
Re：评论
看起来很接近我
注意我已经改变了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,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,0.3) inset,0 -2px 6px rgba(0,0.4) inset;
display: block;
height: 100%;
overflow: hidden;
position: relative;
}
