1.矩形
绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了。
2.圆角矩形
绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可。
3.圆
根据圆的特性,在2的基础上,设置div的宽和高一直,为正方形,然后设置border-radius为50%即可。
4.椭圆
椭圆也很简单了,只需要在3的基础上,让div的宽和高不一致即可。为了更好看,建议宽设置为高的1.5倍。
5.三角形
三角形相对其他来说,就有点难了。这里我们要用到border-style属性在配合分别设置四个边的border的宽度来实现。最终效果见下面的代码。
6.弧
本质上是利用圆角来实现,现在需要把矩形的左上角的圆角绘制成弧形,那么把右边和底边border的宽度设成0px,让他们不可见,设置左上角圆角的半径,让其变大,看得明显些,其余的圆角半径全都设成0px,这样一个弧形就完成了。
7.平行四边形
平行四边形是在矩形的基础上运用了一个CSS3的transform属性。使用了变形效果。
8.六角星
六角星是使用了一个“:after”制作了另一个反方向的三角形,在定位层叠到一起,从而形成六角星,说白一点就是两个三角拼在一起变成了六角星。
9.五角星
五角星主要也是使用了CSS3的transform属性,并配合“:after”来使用。
10.心形、阴阳图、Point Burst、仿微信消息框、Pac-Man等就不一一举例了,大家直接看代码。