前端 - 类似这种图例怎么实现效果比较好

问题描述

问题解答

可以用线性渐变.

<p class='linear'></p>

.linear{ width: 300px; height: 10px; border-radius: 5px; background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, gray 75%);}

https://jsfiddle.net/mmdgtj1e/

这是静态图吗？假设如果是，不需要来加动态效果，这个还是很好做的，最可耻的方法 扔给美工姐姐去，让她直接给你P出来个PNG直接用要是自己弄得换这个用行内元素拼接呗，然后设置边框

.common{ display:inline-block; width: 100px; float: left;}.clearfix{ *zoom: 1; }.clearfix:after { display: table; clear: both; content: ''; }.one{border-top:3px solid #ddd;}.two{border-top:3px solid #e34;}.three{border-top:3px solid #532;}.four{border-top:3px solid #244532;}.five{ border-top:3px solid #ccc;}----------<p class='clearfix'><span class=’one common’>1</span><span class=’two common’>10</span><span class=’three common’>100</span><span class=’four common’>1000</span><span class=’five common’>10000</span></p>