一、必要的CSS属性
1.伪类 ::before & ::after
我们知道可以给 HTML标签添加伪元素，其中::befare、::after能够应用几乎所有的 CSS 属性，也就是说可以通过添加伪元素让一个HTML标签实现3个标签的样式效果，这样可以减少在复杂的 CSS icon 中的标签数量，让HTML结构更简洁。
.pseudo{
position:relative;
width:150px;
height:70px;
margin:30px;
background:#999;
line-height:50px;
text-align:center;
color:#fff;
}
.pseudo::before{
content:"::before";
position:absolute;
top:-20px;
left:-20px;
width:70px;
height:50px;
background:#368fdc;
}
.pseudo::after{
content:"::after";
position:absolute;
bottom:-20px;
right:-20px;
width:50px;
height:50px;
background:#de3000;
}
2.边框 border
border 是最常用的 CSS 属性，同时它也是在 CSS icon 中使用频率最高的属性，原因在于 border 独特的渲染方式——当改变模盒的高宽与边框的值时，会呈现不同形状。
.triangle_a {
width: 30px;
height: 30px;
border-top: 30px solid #de3000;
border-right: 30px solid #ecb400;
border-bottom: 30px solid #87bb00;
border-left: 30px solid #368fdc;
}
.triangle_b {
width: 0px;
height: 0px;
border-top: 45px solid #de3000;
border-right: 45px solid #ecb400;
border-bottom: 45px solid #87bb00;
border-left: 45px solid #368fdc;
}
通过上面的例子可以看到当宽高度都设为0时, border 会呈现边界斜线，借助这个特性，就可以制作多种多边形：
因为代码较多所以就统一列出：