CSS icon 拼装指南
一、必要的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 会呈现边界斜线，借助这个特性，就可以制作多种多边形：
因为代码较多所以就统一列出：
提示：你可以先修改部分代码再运行。
3.圆角 border-radius
也是常用的 CSS3 属性，能帮助我们构造圆形、椭圆形、扇形等基础形状；
border-radius 的语法与margin、padding类似都是遵循上右下左的顺序，缩写方法也一样：
border-radius:10px;
border-radius:10px 20px;
当然也可以单独定义一个角：
border-top-right-radius:10px;
同时它也有比较特别的语法：
border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
“/”前是指圆角的水平半径，”/”后是指圆角的垂直半径，并遵循上右下左的顺序。
看下列子：
.circle {
width: 80px;
height: 80px;
background: #888;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.oval {
width: 100px;
height: 50px;
background: #888;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
.egg {
display:block;
width: 63px;
height: 90px;
background-color: #888;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
4.变形 transform
制作复杂的 CSS icon 时会经常用到，常用的效果包括：
旋转 rotate
-webkit-transform:rotate(-30deg)
-30deg 表示逆时针旋转30度
45deg 表示顺时针旋转45度
倾斜 skew
-webkit-transform:skew(20deg)
语法与 rotate 相同，通过 skew 实现矩形变平行四边形
缩放 scale
scale 的作用在于当我们需要更改 CSS icon 的尺寸时不用去一个个修改高、宽、边框等属性，直接通过 scale 设置就OK了
-webkit-transform:scale(3, 3);
scale(3,3)的参数中，前一个表示高、后一个表示宽；这句的意思就是高宽都放大3倍，当然也可以设置为scale(1,3)、scale(-3,-3)
二、组合基础形状
通过上面的CSS属性，可以轻松的制作出基础形状，而复杂的形状都是由简单的形状组合来的，下面举几个简单的例子：
1.WIFI
.wifi{
position: relative;
top:25px;
left:30px;
width: 20px;
height: 20px;
border-right: 9px solid #444;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-bottom: 9px solid transparent;
border-radius: 100%;
border-style: double;
-webkit-transform: rotate(-90deg) scale(4, 4);
-moz-transform: rotate(-45deg) scale(4, 4);
-ms-transform: rotate(-45deg) scale(4, 4);
-o-transform: rotate(-45deg) scale(4, 4);
transform: rotate(-45deg) scale(4, 4);
}
.wifi:before{
position: absolute;
top:3px;
left:3px;
content: "";
width: 0;
height: 0;
border-right: 7px solid #444;
border-top: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid transparent;
border-radius: 100%;
}
2.型心
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
3.水滴
.water{
position: relative;
width: 212px;
height: 100px;
}
.water:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid #368fdc;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
三、小结
本篇文章主要总结了一些制作 CSS icon 必要的知识，就像搭积木一样，有了基础的形状，剩下的就是发挥想象，运用最少的代码实现想要的 CSS icon，其实 CSS 还有个优势就是应用动画效果，只是在这里没有体现。如果比较感兴趣的话可以看看最后的 CSS icon 资源，里面有不少技巧值得学习。
CSS icon 资源：
http://nicolasgallagher.com/pure-css-gui-icons/
http://css-tricks.com/examples/ShapesOfCSS/
http://www.1stwebdesigner.com/css/css-icons-logos/