HTML：彩色分级栏

我正在努力实现颜色评级栏类似于一个在GsmArena网站。我尝试使用div，如下所示

<div style="background-color: yellow;width: 150px;">
        <div style="background-color: red;width: 40%; height: 15px;">
        </div>
</div>

有没有其他更好的方法来设计评级栏？感谢您的帮助。提前谢谢

编辑：

---

如图所示（从gsmarena拍摄），如何将内部div准确地放置在外部div的中心位置？

我想说您拥有的足够好了。做了一些非常相似的事情：

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 37%;"></div>
</div>

编辑：如果你想知道他们在gsmarena的确切情况，那么这里有一个模仿他们的css（按照@Pelshoff的建议拆分css）：

.图形{背景色：#d0c0c1；宽度：150px；高度：11px；填充：1px}
.graph>div{width:100%；height:100%；边框宽度：1px 0 0 1px；边框样式：纯色；边框颜色：#eedfdc#d0c0c1#d0c0c1#eedfdc；}
.bar{背景色：#e94949；宽度：40%；高度：65%；边框：1px实心#475a69；}
.bar>div{height:80%；边框宽度：1px 0 0 1px；边框样式：纯色；边框颜色：#ec9493#E949#E949#ec9493；}

上面的html生成以下内容：

在gsmarena上，他们使用图像，但这是在纯css中完成的。1px高光需要4个div，而不是2个div

---

这一切都是通过复制图像颜色和firefox/chrome对css进行排序来完成的。

我想说，您拥有的已经足够好了。做了一些非常相似的事情：

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 37%;"></div>
</div>

编辑：如果你想知道他们在gsmarena的确切情况，那么这里有一个模仿他们的css（按照@Pelshoff的建议拆分css）：

.图形{背景色：#d0c0c1；宽度：150px；高度：11px；填充：1px}
.graph>div{width:100%；height:100%；边框宽度：1px 0 0 1px；边框样式：纯色；边框颜色：#eedfdc#d0c0c1#d0c0c1#eedfdc；}
.bar{背景色：#e94949；宽度：40%；高度：65%；边框：1px实心#475a69；}
.bar>div{height:80%；边框宽度：1px 0 0 1px；边框样式：纯色；边框颜色：#ec9493#E949#E949#ec9493；}

上面的html生成以下内容：

在gsmarena上，他们使用图像，但这是在纯css中完成的。1px高光需要4个div，而不是2个div

---

这一切都是通过复制图像颜色和firefox/chrome对css进行排序来完成的。

除此之外，您还可以将一些样式移到css中；这个解决方案的哪一部分让你不满意？除了你可以将一些样式移到CSS；此解决方案的哪一部分对您不满意？谢谢您的回复。如何将内部div精确地放置在gsmarena中显示的外部div的中心？太棒了！！我只是喜欢gsmarena的例子！！谢谢你的回复。如何将内部div精确地放置在gsmarena中显示的外部div的中心？太棒了！！我只是喜欢gsmarena的例子！！