是否可以对同一元素进行凹圆角？

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;
}