3

我正在尝试显示一个进度条，该进度条以不同的颜色显示超过 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;
}

谢谢！

4

2 回答 2

2

纯 CSS 进度条——小提琴

于 2012-10-13T07:48:02.233 回答
2

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

请原谅我对 jQuery 的使用。

于 2012-10-13T07:40:04.137 回答