可以用线性渐变.

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