图标不是有设计师在设计软件中做吗?为什么要用CSS来绘制图标呢？原因就是好玩儿呗！而且同时还是加强我们的CSS熟练度以及考验我们的思考能力。何乐而不为呢。我们今天就一起来看看怎么用CSS绘制图标。
在这之前我们先来看几个网友用CSS画的图标
上面的这些图标都是用CSS3花出来的，是不是很好玩儿，很有趣。非常的酷炫狂拽。想不想自己也试一试呢？
好了，先来考虑一下用CSS画图标的原理：
比如说一个矩形，怎么用CSS来画
我想这个对于大家来说是很简单的，只要学习过CSS的肯定都能画出来，我们稍微调整一下它的宽高，又能得到正方形了，线状之类的图形：
但是要画一个三角形呢？
在早期的CSS中是没有任何一个样式是可以生成三角形或者是不规则之类的图形的，后来就有人发现了边框的奥秘。
先来给某个元素应用边框：
如果给这四个边框都应用不同的颜色：
我们会发现这些边框的交界处是一条斜线，然后我们进一步把元素的高度和宽度减少至零，然后增加边框的宽度：
样式参考：
div{
width:0px;
height:0px;
border-top:150pxsolid blue;
border-bottom:150pxsolid black;
border-left:150pxsolid yellow;
border-right:150pxsolid green;
}
神奇的事情发生了，我们得到了是个尖对尖的三角形，把我们不需要的边给去掉，然后就得到了一个三角形：
样式参考;
div{
width:0px;
height:0px;
border-bottom:150pxsolid blue;
border-left:150pxsolid transparent;
border-right:150pxsolid transparent;
}
修改不同方向上边框的厚度，还能变换出各种角度的三角形
div{
width:0px;
height:0px;
border-bottom:150pxsolid blue;
border-left:0pxsolid transparent;
border-right:150pxsolid transparent;
}
画完三角形，再来看一下如何画圆：
我相信大家都知道在CSS3中，有border-radius这样一个属性，圆角边框：
border-radius不仅对边框border起作用，对实体矩形也是有作用的。当我们我们将圆角的值增大到一定的时候，就会得到一个圆：
代码参考：
div{
width:200px;
height:200px;
background:red;
border-radius:100px;
}
代码参考：
div{
width:200px;
height:20px;
background:red;
border-radius:100px;
}
或者这样的一个圆角条：
根据上面的基本图形，组合一下，得到这样一个图标：
所以这就是用CSS绘制图标的一个思路，一些很复杂的图标，我们将其拆开，会发现它都是有一些基本的图形构成的。
接下来再来看一个比较有难度的
前面的三角形好说，大家现在应该都会写，问题就在于后面的那个小弯构。
我们来思考一下：
我们可以先从四分之一的圆角下手
将其中一边的厚度减为零，就会得到这样一个东西：
最后我们调整宽高再加上三角：
代码参考：
上面给大家介绍的这些技巧都是非常标准的CSS特性，只有那些对CSS的各种特性观察入微的人才有可能在非常规的状态下将其发挥出来，完成那些不可能完成的任务。开动脑子做起来吧！
网站介绍：http://one-div.com/
这个网站收集了作者自己制作的一些纯CSS图标，这里面的图标有一个很大的特点都是用一个空的div来实现的非常厉害。推荐大家去看一下。
