为什么要用CSS来画图标?
对,就是好玩。
下面进入正题
怎样用css画出一个三角形?
我们先来建一个框,给它的四个边分别定义不同的颜色
这时会发现,如果将宽和高设置成零就会出现这种情况
如果将上边框、左边框和右边框都设置成透明,就会发现一个三角形已经出来了。
用css画图标首先要把一个复杂的图标拆解成简单的图标,下面先来一个简单的。
这个房子可以看成一个三角形和缺了一个边的框。这个很简单,再来一个复杂一丢丢的。
这个图标其他的都简单,关键就是中间哪个鹰嘴形状的图形,那这里就不得不说一下圆角了。
圆角的圆弧两边的半径是可以不同的,而这个鹰嘴图形就是将左上角的圆角的两个半径分别设置为300像素和250像素。然后将左边的边框设置成0像素, 就可以做出这个图形了。
上面说的两个图标其实用ps做的话会更简单,但是为什么要用css来画呢?
因为好玩啊,
平时常见的图标基本上都可以用css来做出来,比如
这里就不放代码了,有兴趣的可以尝试一下。