/*实心*/
.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>
CSS绘制Icon
最新推荐文章于 2024-08-16 09:00:00 发布