纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。

1、正方形

 CSS代码如下：

#square { 
width: 100px; 
height: 100px; 
background: red; 
} 

2、长方形

CSS代码如下：

#rectangle { 
width: 200px; 
height: 100px; 
background: red;
} 

3、圆形

#circle { 
width: 100px; 
height: 100px; 
background: red;
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px; 
} 

4、椭圆，代码：

#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 
} 

更多见：http://www.cnblogs.com/top5/archive/2012/02/14/2351959.html