Html 如何在css中显示一个进度条来显示超额完成（100%以上）？

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

#进度条{
背景色：黑色；
边界半径：13px；/*（内部分区高度）/2+填充*/
填充：3倍；
}
#进步酒吧部{
背景颜色：橙色；
宽度：40%；/*使用JavaScript进行调整*/
高度：20px；
边界半径：10px；
}

谢谢

---

请原谅我使用jQuery。

纯CSS进度条--

这个网站给了你一个想法：使用非标准的webkit属性。我不认为这是有利的。仔细阅读问题@Perpetional_dream想要css progress barMine和你的一样是纯css（javascript只是一个帮助函数，可以更轻松地更改值），没有必要对此大惊小怪。