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

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

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

1、正方形

最终效果：

CSS代码如下：

2、长方形

最终效果：

CSS代码如下：

3、圆形

最终效果：

CSS代码如下：

4、椭圆

最终效果：

CSS代码如下：

5、上三角

最终效果：

CSS代码如下：

6、下三角

最终效果：

CSS代码如下：

7、左三角

最终效果：

CSS代码如下：

8、右三角

最终效果：

CSS代码如下：

9、左上三角

最终效果：

CSS代码如下：

10、右上三角

最终效果：

CSS代码如下：

11、左下三角

最终效果：

CSS代码如下：

12、右下三角

最终效果：

CSS代码如下：

13、平行四边形

最终效果：

CSS代码如下：

14、梯形

最终效果：

CSS代码如下：

15、六角星

最终效果：





CSS代码如下：

一共28个，个人觉得后面几个比较犀利。这些代码的来源是css-tricks。由青藤屋博客整理，转载请保留原文链接：

http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html