详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

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等就不一一举例了，大家直接看代码。

DEMO地址：http://codepen.io/jonechen/pen/mPgYYQ