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

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

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

1、正方形

最终效果：

CSS代码如下：

1 2 3 4 5

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

2、长方形

最终效果：

CSS代码如下：

1 2 3 4 5

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

3、圆形

最终效果：

CSS代码如下：

1 2 3 4 5 6 7 8

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

4、椭圆

最终效果：

CSS代码如下：

1 2 3 4 5 6 7 8

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

5、上三角

最终效果：

CSS代码如下：

1 2 3 4 5 6 7

#triangle-up {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-bottom : 100px solid red ; }

6、下三角

最终效果：

CSS代码如下：

1 2 3 4 5 6 7

#triangle-down {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-top : 100px solid red ; }

7、左三角

最终效果：

CSS代码如下：

1 2 3 4 5 6 7

#triangle- left {      width : 0 ;      height : 0 ;      border-top : 50px solid transparent ;      border-right : 100px solid red ;      border-bottom : 50px solid transparent ; }

8、右三角

最终效果：

CSS代码如下：

1 2 3 4 5 6 7

#triangle- right {      width : 0 ;      height : 0 ;      border-top : 50px solid transparent ;      border-left : 100px solid red ;      border-bottom : 50px solid transparent ; }

9、左上三角

最终效果：

CSS代码如下：

1 2 3 4 5 6

#triangle-topleft {      width : 0 ;      height : 0 ;      border-top : 100px solid red ;      border-right : 100px solid transparent ;          }

10、右上三角

最终效果：

CSS代码如下：

1 2 3 4 5 6 7

#triangle-topright {      width : 0 ;      height : 0 ;      border-top : 100px solid red ;      border-left : 100px solid transparent ;       }

11、左下三角

最终效果：

CSS代码如下：

1 2 3 4 5 6

#triangle-bottomleft {      width : 0 ;      height : 0 ;      border-bottom : 100px solid red ;      border-right : 100px solid transparent ;  }

12、右下三角

最终效果：

CSS代码如下：

1 2 3 4 5 6

#triangle-bottomright {      width : 0 ;      height : 0 ;      border-bottom : 100px solid red ;      border-left : 100px solid transparent ; }

13、平行四边形

最终效果：

CSS代码如下：

1 2 3 4 5 6 7 8 9

#parallelogram {      width : 150px ;      height : 100px ;          margin-left : 20px ;      -webkit-transform: skew( 20 deg);         -moz-transform: skew( 20 deg);           -o-transform: skew( 20 deg);      background : red ; }

14、梯形

最终效果：

CSS代码如下：

1 2 3 4 5 6 7

#trapezoid {      border-bottom : 100px solid red ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      height : 0 ;      width : 100px ; }

15、六角星

最终效果：

 

 

CSS代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#star-six {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-bottom : 100px solid red ;      position : relative ; } #star-six:after {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-top : 100px solid red ;      position : absolute ;      content : "" ;      top : 30px ;      left : -50px ; }

一共28个，个人觉得后面几个比较犀利。这些代码的来源是 css-tricks。由 青藤屋博客整理，转载请保留原文链接：
http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html