CSS绘制Icon

/*实心*/
.icon{ 
    display: inline-block;
    width:0px;
    height:0px;
    overflow:hidden;
    vertical-align: middle;
    border-width:10px;
    border-color:transparent transparent transparent blue;
    border-style: dashed dashed dashed solid
}
/*空心*/
.icon-line::before,
.icon-line::after {
    position:absolute;
    content: "";
    width:0px;
    height:0px;
    display: inline-block;
    border-width:10px;
    border-color:transparent;
    border-style: dashed dashed dashed solid;
}
.icon-line::before {
    z-index: 1;
    border-left-color:#ffcc00;
}
.icon-line::after {
    margin-left: 1px;
    border-left-color: red;
}
<i class="icon"></i>
<i class="icon-line"></i>