html - 如何在 css 中显示一个显示超额完成(超过 100%)的进度条？

Question

我正在尝试显示一个进度条，该进度条以不同的颜色显示超过 100% 的百分比，以表明已经超额完成。这如何在 HTML/CSS 中完成？

以下内容适用于显示百分比高达 100% 的进度条

<div id="progressbar">
  <div></div>
</div>

#progressbar {
  background-color: black;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar div {
   background-color: orange;
   width: 40%; /* Adjust with JavaScript */
   height: 20px;
   border-radius: 10px;
}

谢谢!

Answer 1

http://jsfiddle.net/qTmGE/1/

请原谅我使用 jQuery。