将图形添加到Bootstrap进度条

Question

我想像这样制作一个自定义Bootstrap进度跟踪器：

使用纯HTML / CSS。这就是我到目前为止所拥有的

HTML：

<div class="progress progress-manager">   
    <div class="progress-bar progress-bar-done" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style: "width:14%">
        <div id="circle"></div>
    </div>
</div>

CSS：

#circle{
    color: blue;
    background-color: blue;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

其中吐出以下内容（注意圈子没有超出进度条）：

Bootstrap的进度条没有:before个伪元素，那么我怎样才能获得与示例类似的结果？

Answer 1

问题是.progress类适用overflow: hidden因此没有子元素会比包装器更高。并且.progress之外的元素不能相对于孩子定位。

解决此问题的一种方法是删除.progress包装器上的溢出规则，如下所示：

.progress {
    overflow: visible;
}

然后你必须手动将边界半径应用于.progress-bar，因为它不再受其父母的限制：

.progress-bar {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

然后，您可以在.progress-bar的末尾添加一个圆圈，方法是添加一个带有:after伪类的元素，并添加一个等于元素宽度/高度一半的边框半径。

.progress-bar:after {
    content:"";
    background-color: darkgreen;

    width: 30px;
    height: 30px;
    margin-right: -15px;
    margin-top: -5px;
    -webkit-border-radius: 15px; 
       -moz-border-radius: 15px; 
            border-radius: 15px;

    float: right;
}

Demo in fiddle

这将是这样的：

  

警告：overflow:hidden是有原因的。我不确定为什么，但这可能会产生意想不到的后果。