css - 同一个元素可以做凹 Angular 和圆 Angular 吗？

Question

我需要它看起来像这样:

这是标记:

<div class="hni_vaBreadcrumbContainer">
  <progress class="hni_vaBreadcrumbProgress" value="0" max="100"></progress>
  <span class="hni_vaBreadcrumbContent">0%</span>
</div>

这是我试过但无法工作的几个 jfiddles: http://jsfiddle.net/x4wLf/ , http://jsfiddle.net/cogent/6A5Lb/

我可以只为百分比文本使用背景图片，但更喜欢所有 CSS。

谢谢!

Answer 1

我想我实际上用很少的标记/css 就解决了这个问题。

http://jsfiddle.net/o22b4uyz/2/

标记

<div class='wrapper'>
  <div class='concave'><span class="percent">20%</span></div>
</div>

CSS

div.wrapper {
    background:blue;
    width:80px;
    height:20px;
    position:relative;
    border-radius: 50px;
} 
div.concave {
    position:absolute;
    background:white;
    width:20px;
    height:20px;
    border-radius:50px;
left:-3px;
    }
span.percent {
    padding-left: 40px;
    color: #fff;
}