純css畫各種圖形，包括基本的矩形、圓形、橢圓、三角形、多邊形，也包括稍微複雜一點的愛心、鑽石、陰陽八卦等

今天在css-tricks上看到一篇文章，那篇文章讓我不禁心頭一震，強大的CSS啊，居然能畫出這麼多基本的圖形。圖形包括基本的矩形、圓形、橢圓、三角形、多邊形，也包括稍微複雜一點的愛心、鑽石、陰陽八卦等。當然有一些需要用到CSS3的屬性，所以在你開啟這篇文章的時候，我希望你用的是 firefox或者chrome，當然IE也能看一部分的。那好，下面就一起來看看我們是如何用純CSS來畫這些圖形的。

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

1、正方形

最終效果：

CSS代碼如下：

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

2、長方形

最終效果：

CSS代碼如下：

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

3、圓形

最終效果：

CSS代碼如下：

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

4、橢圓

最終效果：

CSS代碼如下：

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

5、上三角

最終效果：

CSS代碼如下：

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

6、下三角

最終效果：

CSS代碼如下：

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

7、左三角

最終效果：

CSS代碼如下：

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

8、右三角

最終效果：

CSS代碼如下：

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

9、左上三角

最終效果：

CSS代碼如下：

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

10、右上三角

最終效果：

CSS代碼如下：

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

11、左下三角

最終效果：

CSS代碼如下：

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

12、右下三角

最終效果：

CSS代碼如下：

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

13、平行四邊形

最終效果：

CSS代碼如下：

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

14、梯形

最終效果：

CSS代碼如下：

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

15、六角星

最終效果：

CSS代碼如下：

#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;}

16、五角星

最終效果：

CSS代碼如下：

#star-five {   margin: 50px 0;   position: relative;   display: block;   color: red;   width: 0px;   height: 0px;   border-right:  100px solid transparent;   border-bottom: 70px  solid red;   border-left:   100px solid transparent;   -moz-transform:    rotate(35deg);   -webkit-transform: rotate(35deg);   -ms-transform:     rotate(35deg);   -o-transform:      rotate(35deg);}#star-five:before {   border-bottom: 80px solid red;   border-left: 30px solid transparent;   border-right: 30px solid transparent;   position: absolute;   height: 0;   width: 0;   top: -45px;   left: -65px;   display: block;   content: '';   -webkit-transform: rotate(-35deg);   -moz-transform:    rotate(-35deg);   -ms-transform:     rotate(-35deg);   -o-transform:      rotate(-35deg);    }#star-five:after {   position: absolute;   display: block;   color: red;   top: 3px;   left: -105px;   width: 0px;   height: 0px;   border-right: 100px solid transparent;   border-bottom: 70px solid red;   border-left: 100px solid transparent;   -webkit-transform: rotate(-70deg);   -moz-transform:    rotate(-70deg);   -ms-transform:     rotate(-70deg);   -o-transform:      rotate(-70deg);   content: '';}

17、五角大樓

最終效果：

CSS代碼如下：

#pentagon {    position: relative;    width: 54px;    border-width: 50px 18px 0;    border-style: solid;    border-color: red transparent;}#pentagon:before {    content: "";    position: absolute;    height: 0;    width: 0;    top: -85px;    left: -18px;    border-width: 0 45px 35px;    border-style: solid;    border-color: transparent transparent red;}

18、六邊形

最終效果：

CSS代碼如下：

#hexagon {    width: 100px;    height: 55px;    background: red;    position: relative;}#hexagon:before {    content: "";    position: absolute;    top: -25px;     left: 0;    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 25px solid red;}#hexagon:after {    content: "";    position: absolute;    bottom: -25px;     left: 0;    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 25px solid red;}

19、八角形

最終效果：

CSS代碼如下：

#octagon {    width: 100px;    height: 100px;    background: red;    position: relative;} #octagon:before {    content: "";    position: absolute;    top: 0;    left: 0;        border-bottom: 29px solid red;    border-left: 29px solid #eee;    border-right: 29px solid #eee;    width: 42px;    height: 0;} #octagon:after {    content: "";    position: absolute;    bottom: 0;    left: 0;        border-top: 29px solid red;    border-left: 29px solid #eee;    border-right: 29px solid #eee;    width: 42px;    height: 0;}

20、愛心

最終效果：

CSS代碼如下：

#heart {    position: relative;    width: 100px;    height: 90px;}#heart:before,#heart:after {    position: absolute;    content: ""