前端 - 類似這種圖例怎么實現效果比較好

問題描述

問題解答

可以用線性漸變.

<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>