用CSS画图标

为什么要用CSS来画图标？

你猜啊.jpg

对，就是好玩。

下面进入正题

怎样用css画出一个三角形？

三角形.png

我们先来建一个框，给它的四个边分别定义不同的颜色

框.jpg

这时会发现，如果将宽和高设置成零就会出现这种情况

框1.jpg

如果将上边框、左边框和右边框都设置成透明，就会发现一个三角形已经出来了。

三角形1.jpg

用css画图标首先要把一个复杂的图标拆解成简单的图标，下面先来一个简单的。

house.jpg houseCss.jpg

这个房子可以看成一个三角形和缺了一个边的框。这个很简单，再来一个复杂一丢丢的。

文件.jpg 文件css.jpg

这个图标其他的都简单，关键就是中间哪个鹰嘴形状的图形，那这里就不得不说一下圆角了。
圆角的圆弧两边的半径是可以不同的，而这个鹰嘴图形就是将左上角的圆角的两个半径分别设置为300像素和250像素。然后将左边的边框设置成0像素， 就可以做出这个图形了。

上面说的两个图标其实用ps做的话会更简单，但是为什么要用css来画呢？
因为好玩啊，

哈哈哈.png

平时常见的图标基本上都可以用css来做出来，比如

菜单.jpg 播放.jpg 下载.jpg 视频.jpg

这里就不放代码了，有兴趣的可以尝试一下。