如何用HTML5实现如下的样式，急求源代码！！！！

css：

.test{
    font-weight:500;
    font-family: "黑体";
    font-size: 14px;
}
.test p span{
    width:50px;
    height:15px;
    display: inline-block;
    border-right:2px solid white;
    text-align: center;
}
.test .tex span:first-child{
    width:25px;
    text-align: left;
}
.test .clo span:nth-child(1){
    background-color:#01E400; 
}
.test .clo span:nth-child(2){
    background-color: #FFFF00;
}
.test .clo span:nth-child(3){
    background-color:#FF7E00; 
}
.test .clo span:nth-child(4){
    background-color: #FF0000;
}
.test .clo span:nth-child(5){
    background-color: #99004C;
}
.test .clo span:nth-child(6){
    background-color: #7E0023;
    border-right:none;
}

html:

        
PM2.5浓度示意图例(微克/立方米)

    
    03575115150250