CSS3实现32种基本图形

      CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

      这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。
      网页代码中用到（<!-- 浮动Div换行 --> <div style="clear:both">）和Div边距设置和浮动（margin: 20px 20px; float: left;）。

      参考文章：http://blog.csdn.net/chenhongwu666/article/details/38905803

        1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

     效果图：

                    

[css]  view plain  copy

 print ?

1. #Circle{  
2.   width:100px;  
3.   height:100px;  
4.   float: left;  
5.   background: #6fee1d;  
6.   -moz-border-radius: 50px;  
7.   -webkit-border-radius: 50px;  
8.   border-radius: 50px;  
9. }  

    2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

    效果图：

                 

[css]  view plain  copy

 print ?

1. #Oval {  
2.    width: 200px;  
3.    height: 100px;  
4.    float: left;  
5.    background: #e9880c;  
6.    -webkit-border-radius: 100px / 50px;  
7.    -moz-border-radius: 100px / 50px;  
8.    border-radius: 100px / 50px;  
9.  }  

    3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。

    效果图：

                 

[css]  view plain  copy

 print ?

1. #Triangle {  
2.    width: 0;  
3.    height: 0;  
4.    float: left;  
5.    border-bottom: 100px solid #fcf706;  
6.    border-left: 50px solid transparent;  
7.    border-right: 50px solid transparent;  
8.  }  

       4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

    效果图：

             

[css]  view plain  copy

 print ?

1. #InvertedTriangle {  
2.    width: 0;  
3.    height: 0;  
4.    float: left;  
5.    border-top: 100px solid #30a3bf;  
6.    border-left: 50px solid transparent;  
7.    border-right: 50px solid transparent;  
8.  }  

      5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

    效果图：

              

[css]  view plain  copy

 print ?

1. #LeftTriangle {  
2.   width: 0;  
3.   height: 0;  
4.   float: left;  
5.   border-top: 50px solid transparent;  
6.   border-right: 100px solid #466f20;  
7.   border-bottom: 50px solid transparent;  
8. }  

      6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。

      效果图：

              

[css]  view plain  copy

 print ?

1. #RightTriangle {  
2.    width: 0;  
3.    height: 0;  
4.    float: left;  
5.    border-top: 50px solid transparent;  
6.    border-left: 100px solid #800820;  
7.    border-bottom: 50px solid transparent;  
8.  }  

     7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

     效果图：

           

[css]  view plain  copy

 print ?

1. #Diamond {  
2.   width: 100px;  
3.   height: 100px;  
4.   float: left;  
5.   background: #8e00ff;  
6.   /* Rotate */  
7.   -webkit-transform: rotate(-45deg);  
8.   -moz-transform: rotate(-45deg);  
9.   -ms-transform: rotate(-45deg);  
10.   -o-transform: rotate(-45deg);  
11.   transform: rotate(-45deg);  
12.   /* Rotate Origin */  
13.   -webkit-transform-origin: 0 100%;  
14.   -moz-transform-origin: 0 100%;  
15.   -ms-transform-origin: 0 100%;  
16.   -o-transform-origin: 0 100%;  
17.   transform-origin: 0 100%;  
18.   margin: 40px 0 10px 240px;  
19.  }  

     8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

    效果图：

              

[css]  view plain  copy

 print ?

1. #Trapezium {  
2.  height: 0;  
3.  width: 100px;  
4.  float: left;  
5.  border-bottom: 100px solid #dc2500;  
6.  border-left: 50px solid transparent;  
7.  border-right: 50px solid transparent;  
8. }  

      9.长方形：宽比高长。

     效果图：

        

[css]  view plain  copy

 print ?

1. #Rectangle {  
2.  height: 50px;  
3.  width: 100px;  
4.  float: left;  
5.  background: #afe05d;  
6. }  

     10.正方形：宽和高相等。

    效果图：

            

[css]  view plain  copy

 print ?

1. #Square {  
2.  height: 100px;  
3.  width: 100px;  
4.  float: left;  
5.  background: #b02089;  
6. }  

      11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

      效果图：

          

[css]  view plain  copy

 print ?

1. #Ring {  
2.  width: 100px;  
3.  height: 100px;  
4.  float: left;  
5.  background-color: white;  
6.  border-radius: 80px;  
7.  border:5px #ffd700 solid;  
8. }  

      12.平行四边形：使用transform使长方形倾斜一个角度。

     效果图：

             

[css]  view plain  copy

 print ?

1. #Parallelogram {  
2.  width: 120px;  
3.  height: 80px;  
4.  float: left;  
5.  margin-left: 10px;  
6.  -webkit-transform: skew(30deg);  
7.  -moz-transform: skew(230deg);  
8.  -o-transform: skew(30deg);  
9.  transform: skew(30deg);  
10.  background-color: #2eda01;  
11. }  

     13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。

      效果图：

         

[css]  view plain  copy

 print ?

1. #FiveStar {  
2.    width: 0;  
3.    height: 0;  
4.    float: left;  
5.    margin: 20px 20px;  
6.    color: #ff0012;  
7.    position: relative;  
8.    display: block;  
9.    border-right: 80px solid transparent;  
10.    border-bottom: 60px solid #ff0012;  
11.    border-left: 80px solid transparent;  
12.    -moz-transform: rotate(35deg);  
13.    -webkit-transform: rotate(35deg);  
14.    -ms-transform: rotate(35deg);  
15.    -o-transform: rotate(35deg);  
16.  }  
17.  #FiveStar:before {  
18.    height: 0;  
19.    width: 0;  
20.    content: '';  
21.    position: absolute;  
22.    display: block;  
23.    top: -35px;  
24.    left: -50px;  
25.    border-bottom: 60px solid #ff0012;  
26.    border-left: 20px solid transparent;  
27.    border-right: 20px solid transparent;  
28.    -webkit-transform: rotate(-35deg);  
29.    -moz-transform: rotate(-35deg);  
30.    -ms-transform: rotate(-35deg);  
31.    -o-transform: rotate(-35deg);  
32.  }  
33.  #FiveStar:after {  
34.    width: 0;  
35.    height: 0;  
36.    content: '';  
37.    position: absolute;  
38.    display: block;  
39.    top: 3px;  
40.    left: -85px;  
41.    color: #ff0012;  
42.    border-right: 80px solid transparent;  
43.    border-bottom: 60px solid #ff0012;  
44.    border-left: 80px solid transparent;  
45.    -webkit-transform: rotate(-70deg);  
46.    -moz-transform: rotate(-70deg);  
47.    -ms-transform: rotate(-70deg);  
48.    -o-transform: rotate(-70deg);  
49.  }  

      14.六角星：使用transform属性来旋转不同的边。

     效果图：

           

[css]  view plain  copy

 print ?

1. #SixStar{  
2.   width: 0;  
3.   height: 0;  
4.   float: left;  
5.   border-left: 50px solid transparent;  
6.   border-right: 50px solid transparent;  
7.   border-bottom: 100px solid #cfd810;  
8.   position: relative;  
9.  }  
10.  #SixStar:after{  
11.   width: 0;  
12.   height: 0;  
13.   content: "";  
14.   border-top: 100px solid #cfd810;  
15.   border-left: 50px solid transparent;  
16.   border-right: 50px solid transparent;  
17.   position: absolute;  
18.   top: 30px;  
19.   left: -50px;  
20.  }  

     15.六边形：在长方形上面和下面各放置一个三角形。

       效果图：

                

[css]  view plain  copy

 print ?

1. #Hexagon {  
2.    width: 100px;  
3.    height: 55px;  
4.    float: left;  
5.    background: #000001;  
6.    position: relative;  
7.    margin: 10px auto;  
8.  }  
9.  #Hexagon:before {  
10.    content: "";  
11.    width: 0;  
12.    height: 0;  
13.    position: absolute;  
14.    top: -25px;  
15.    left: 0;  
16.    border-left: 50px solid transparent;  
17.    border-right: 50px solid transparent;  
18.    border-bottom: 25px solid #000001;  
19. }  
20. #Hexagon:after {  
21.   content: "";  
22.   width: 0;  
23.   height: 0;  
24.   position: absolute;  
25.   bottom: -25px;  
26.   left: 0;  
27.   border-left: 50px solid transparent;  
28.   border-right: 50px solid transparent;  
29.   border-top: 25px solid #000001;  
30. }  

     16.五边形：可以采用三角形和梯形组合。

       效果图：

               

[css]  view plain  copy

 print ?

1. #Pentagon{  
2.   width: 60px;  
3.   float: left;  
4.   position: relative;  
5.   border-width: 52px 20px 0;  
6.   border-style: solid;  
7.   border-color: #711ee2 transparent;  
8. }  
9. #Pentagon:before{  
10.   content: "";  
11.   position: absolute;  
12.   width: 0;  
13.   height: 0;  
14.   top: -92px;  
15.   left: -20px;  
16.   border-width: 0 50px 40px;  
17.   border-style: solid;  
18.   border-color: transparent transparent #711ee2;  
19. }  

     17.八边形：在长方形上面和下面各放置一个梯形。

    效果图：

           

[css]  view plain  copy

 print ?

1. #Octagon{  
2.   width: 100px;  
3.   height: 100px;  
4.   float: left;  
5.   margin: 10px 10px;  
6.   background-color: #66e006;  
7.   position: relative;  
8.  }  
9.  #Octagon:before{  
10.   width: 42px;  
11.   height: 0;  
12.   top: 0;  
13.   left: 0;  
14.   position: absolute;  
15.   content: "";  
16.   border-left: 29px solid #ffffff;  
17.   border-right: 29px solid #ffffff;  
18.   border-bottom: 29px solid #66e006;  
19.  }  
20.  #Octagon:after{  
21.   width: 42px;  
22.   height: 0;  
23.   left: 0;  
24.   bottom: 0;  
25.   position: absolute;  
26.   content: "";  
27.   border-left: 29px solid #ffffff;  
28.   border-right: 29px solid #ffffff;  
29.   border-top: 29px solid #66e006;  
30.  }  

    18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。

     效果图：

        

[css]  view plain  copy

 print ?

1. #Heart {  
2.   float: left;  
3.   position: relative;  
4.  }  
5.  #Heart:before, #Heart:after {  
6.   content: "";  
7.   width: 70px;  
8.   height: 115px;  
9.   position: absolute;  
10.   background: red;  
11.   left: 70px;  
12.   top: 0;  
13.   -webkit-border-radius: 50px 50px 0 0;  
14.   -moz-border-radius: 50px 50px 0 0;  
15.   border-radius: 50px 50px 0 0;  
16.   -webkit-transform: rotate(-45deg);  
17.   -moz-transform: rotate(-45deg);  
18.   -ms-transform: rotate(-45deg);  
19.   -o-transform: rotate(-45deg);  
20.   transform: rotate(-45deg);  
21.   -webkit-transform-origin: 0 100%;  
22.   -moz-transform-origin: 0 100%;  
23.   -ms-transform-origin: 0 100%;  
24.   -o-transform-origin: 0 100%;  
25.   transform-origin: 0 100%;  
26. }  
27. #Heart:after {  
28.   left: 0;  
29.   -webkit-transform: rotate(45deg);  
30.   -moz-transform: rotate(45deg);  
31.   -ms-transform: rotate(45deg);  
32.   -o-transform: rotate(45deg);  
33.   transform: rotate(45deg);  
34.   -webkit-transform-origin: 100% 100%;  
35.   -moz-transform-origin: 100% 100%;  
36.   -ms-transform-origin: 100% 100%;  
37.   -o-transform-origin: 100% 100%;  
38.   transform-origin: 100% 100%;  
39.  }  

      19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。

     效果图：

          

[css]  view plain  copy

 print ?

1. #Egg {  
2.   width: 100px;  
3.   height: 160px;  
4.   float: left;  
5.   background: #ffb028;  
6.   display: block;  
7.   -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
8.   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
9.  }  

      20.无穷符号：通过border属性和设置伪元素的角度来实现。

     效果图：

             

[css]  view plain  copy

 print ?

1. #Infinity {  
2.   width: 220px;  
3.   height: 100px;  
4.   float: left;  
5.   position: relative;  
6.  }  
7.  #Infinity:before, #Infinity:after {  
8.   content: "";  
9.   width: 60px;  
10.   height: 60px;  
11.   position: absolute;  
12.   top: 0;  
13.   left: 0;  
14.   border: 20px solid #008bb0;  
15.   -moz-border-radius: 50px 50px 0;  
16.   border-radius: 50px 50px 0 50px;  
17.   -webkit-transform: rotate(-45deg);  
18.   -moz-transform: rotate(-45deg);  
19.   -ms-transform: rotate(-45deg);  
20.   -o-transform: rotate(-45deg);  
21.   transform: rotate(-45deg);  
22.  }  
23.  #Infinity:after {  
24.   left: auto;  
25.   right: 0;  
26.   -moz-border-radius: 50px 50px 50px 0;  
27.   border-radius: 50px 50px 50px 0;  
28.   -webkit-transform: rotate(45deg);  
29.   -moz-transform: rotate(45deg);  
30.   -ms-transform: rotate(45deg);  
31.   -o-transform: rotate(45deg);  
32.   transform: rotate(45deg);  
33.  }  

      21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

     效果图：

           

[css]  view plain  copy

 print ?

1. #CommentBubble {  
2.    width: 140px;  
3.    height: 100px;  
4.    margin: 30px 20px;  
5.    float: left;  
6.    background: #8867b9;  
7.    position: relative;  
8.    -moz-border-radius: 12px;  
9.    -webkit-border-radius: 12px;  
10.    border-radius: 12px;  
11.  }  
12.  #CommentBubble:before {  
13.    content: "";  
14.    width: 0;  
15.    height: 0;  
16.    right: 100%;  
17.    top: 38px;  
18.    position: absolute;  
19.    border-top: 13px solid transparent;  
20.    border-right: 26px solid #8867b9;  
21.    border-bottom: 13px solid transparent;  
22.  }  

      22.钻石：上面一个梯形，下面一个三角形组成。

      效果图：

             

[css]  view plain  copy

 print ?

1. #Diamonds{  
2.   width: 50px;  
3.   height: 0;  
4.   float: left;  
5.   border-style: solid;  
6.   border-color: transparent transparent #9aff02 transparent;  
7.   border-width: 0 25px 25px 25px;  
8.   position: relative;  
9.   margin: 20px 0 50px 0;  
10. }  
11. #Diamonds:after{  
12.   width: 0;  
13.   height: 0;  
14.   top: 25px;  
15.   left: -25px;  
16.   border-style: solid;  
17.   border-color: #9aff02 transparent transparent transparent;  
18.   border-width: 70px 50px 0 50px;  
19.   position: absolute;  
20.   content: "";  
21.  }  

       23.八卦图：多个圆形的组合。

       效果图：

          

[css]  view plain  copy

 print ?

1. #EightDiagrams{  
2.   width: 96px;  
3.   height: 48px;  
4.   margin: 20px 20px;  
5.   float: left;  
6.   background-color: #ffffff;  
7.   border-color: #000000;  
8.   border-style: solid;  
9.   border-width: 2px 2px 50px 2px;  
10.   border-radius: 100%;  
11.   position: relative;  
12.  }  
13.  #EightDiagrams:before {  
14.   width: 12px;  
15.   height: 12px;  
16.   top: 50%;  
17.   left: 0;  
18.   content: "";  
19.   position: absolute;  
20.   background-color: #ffffff;  
21.   border: 18px solid #000000;  
22.   border-radius: 100%;  
23.  }  
24.  #EightDiagrams:after {  
25.   width: 12px;  
26.   height: 12px;  
27.   top: 50%;  
28.   left: 50%;  
29.   background-color: #000000;  
30.   border: 18px solid #ffffff;  
31.   border-radius:100%;  
32.   content: "";  
33.   position: absolute;  
34.  }  

        24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

       效果图：

        

[css]  view plain  copy

 print ?

1. #PacMan {  
2.  width: 0;  
3.  height: 0;  
4.  float: left;  
5.  border-right: 60px solid transparent;  
6.  border-left: 60px solid #300fed;  
7.  border-top: 60px solid #300fed;  
8.  border-bottom: 60px solid #300fed;  
9.  border-top-left-radius: 60px;  
10.  border-top-right-radius: 60px;  
11.  border-bottom-left-radius: 60px;  
12.  border-bottom-right-radius: 60px;  
13. }  

       25.扇形：在三角形的基础上，让其中一边成弧形 。

       效果图：

          

[css]  view plain  copy

 print ?

1. #Sector {  
2.    width:0;  
3.    height:0;  
4.    float: left;  
5.    background-color: #ffffff;  
6.    border-left: 70px solid transparent;  
7.    border-right: 70px solid transparent;  
8.    border-top: 100px solid #ab9ed1;  
9.    border-radius:50%;  
10.  }  

       26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

        效果图：

            

[css]  view plain  copy

 print ?

1. #CrescentMoon{  
2.    width:80px;  
3.    height:80px;  
4.    float: left;  
5.    background-color: #ffffff;  
6.    border-radius:50%;  
7.    box-shadow: 15px 15px 0 0 #9600d2;  
8.  }  

       27.顶左直角三角形。

       效果图：

          

[css]  view plain  copy

 print ?

1. #TopLeftTriangle {  
2.    width: 0px;  
3.    height: 0px;  
4.    margin: 10px 10px;  
5.    float: left;  
6.    border-top: 100px solid #7efde1;  
7.    border-right: 100px solid transparent;  
8.  }  

        28.顶右直角三角形。

         效果图：

              

[css]  view plain  copy

 print ?

1. #TopRightTriangle {  
2.   width: 0px;  
3.   height: 0px;  
4.   margin: 10px 10px;  
5.   float: left;  
6.   border-top: 100px solid #400526;  
7.   border-left: 100px solid transparent;  
8. }  

       29.底左直角三角形。

        效果图：

              

[css]  view plain  copy

 print ?

1. #BottomLeftTriangle {  
2.   width: 0px;  
3.   height: 0px;  
4.   margin: 10px 10px;  
5.   float: left;  
6.   border-bottom: 100px solid #600ffe;  
7.   border-right: 100px solid transparent;  
8.  }  

      30.底右直角三角形。

        效果图：

              

[css]  view plain  copy

 print ?

1. #BottomRightTriangle {  
2.   width: 0px;  
3.   height: 0px;  
4.   margin: 10px 10px;  
5.   float: left;  
6.   border-bottom: 100px solid #ff7578;  
7.   border-left: 100px solid transparent;  
8.  }  

       31.八角形。

        效果图：

                  

[css]  view plain  copy

 print ?

1. #Burst8 {  
2.  width: 80px;  
3.  height: 80px;  
4.  margin: 10px 10px;  
5.  float: left;  
6.  background-color: #cf7668;  
7.  position: relative;  
8.  transform:rotate(20deg);  
9.  -webkit-transform:rotate(20deg);  
10.  -ms-transform:rotate(20deg);  
11.  -moz-transform:rotate(20deg);  
12.  -o-transform:rotate(20deg);  
13. }  
14. #Burst8:before{  
15.  width: 80px;  
16.  height: 80px;  
17.  top: 0;  
18.  left: 0;  
19.  background-color: #cf7668;  
20.  position: absolute;  
21.  content: "";  
22.  transform:rotate(135deg);  
23.  -webkit-transform:rotate(135deg);  
24.  -ms-transform:rotate(135deg);  
25.  -moz-transform:rotate(135deg);  
26.  -o-transform:rotate(135deg);  
27. }  

      32.十二角形。

          效果图：

             

[css]  view plain  copy

 print ?

1. #Burst12 {  
2.    width: 80px;  
3.    height: 80px;  
4.    margin: 20px 20px;  
5.    float: left;  
6.    background-color: #a8ff26;  
7.    position: relative;  
8.    text-align: center;  
9.  }  
10.  #Burst12:before, #Burst12:after{  
11.    width: 80px;  
12.    height: 80px;  
13.    top: 0;  
14.    left: 0;  
15.    background-color: #a8ff26;  
16.    position: absolute;  
17.    content: "";  
18.  }  
19.  #Burst12:before{  
20.    transform:rotate(30deg);  
21.    -webkit-transform:rotate(30deg);  
22.    -ms-transform:rotate(30deg);  
23.    -moz-transform:rotate(30deg);  
24.    -o-transform:rotate(30deg);  
25.  }  
26.  #Burst12:after{  
27.    transform:rotate(60deg);  
28.    -webkit-transform:rotate(60deg);  
29.    -ms-transform:rotate(60deg);  
30.    -moz-transform:rotate(60deg);  
31.    -o-transform:rotate(60deg);  
32.  }  

      完整的CSS3+HTML5代码：BaseGraphCSS3.html

      效果图：

       

[html]  view plain  copy

 print ?

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>CSS3实现基本图形</title>  
6.   <style>  
7.    #Circle{  
8.      width:100px;  
9.      height:100px;  
10.      float: left;  
11.      background: #6fee1d;  
12.      -moz-border-radius: 50px;  
13.      -webkit-border-radius: 50px;  
14.      border-radius: 50px;  
15.    }  
16.    #Oval {  
17.      width: 200px;  
18.      height: 100px;  
19.      float: left;  
20.      background: #e9880c;  
21.      -webkit-border-radius: 100px / 50px;  
22.      -moz-border-radius: 100px / 50px;  
23.      border-radius: 100px / 50px;  
24.    }  
25.    #Triangle {  
26.      width: 0;  
27.      height: 0;  
28.      float: left;  
29.      border-bottom: 100px solid #fcf706;  
30.      border-left: 50px solid transparent;  
31.      border-right: 50px solid transparent;  
32.    }  
33.    #InvertedTriangle {  
34.      width: 0;  
35.      height: 0;  
36.      float: left;  
37.      border-top: 100px solid #30a3bf;  
38.      border-left: 50px solid transparent;  
39.      border-right: 50px solid transparent;  
40.    }  
41.    #LeftTriangle {  
42.      width: 0;  
43.      height: 0;  
44.      float: left;  
45.      border-top: 50px solid transparent;  
46.      border-right: 100px solid #466f20;  
47.      border-bottom: 50px solid transparent;  
48.    }  
49.    #RightTriangle {  
50.      width: 0;  
51.      height: 0;  
52.      float: left;  
53.      border-top: 50px solid transparent;  
54.      border-left: 100px solid #800820;  
55.      border-bottom: 50px solid transparent;  
56.    }  
57.    #Diamond {  
58.     width: 100px;  
59.     height: 100px;  
60.     float: left;  
61.     background: #8e00ff;  
62.     /* Rotate */  
63.     -webkit-transform: rotate(-45deg);  
64.     -moz-transform: rotate(-45deg);  
65.     -ms-transform: rotate(-45deg);  
66.     -o-transform: rotate(-45deg);  
67.     transform: rotate(-45deg);  
68.     /* Rotate Origin */  
69.     -webkit-transform-origin: 0 100%;  
70.     -moz-transform-origin: 0 100%;  
71.     -ms-transform-origin: 0 100%;  
72.     -o-transform-origin: 0 100%;  
73.     transform-origin: 0 100%;  
74.     margin: 40px 0 10px 240px;  
75.    }  
76.    #Trapezium {  
77.     height: 0;  
78.     width: 100px;  
79.     float: left;  
80.     border-bottom: 100px solid #dc2500;  
81.     border-left: 50px solid transparent;  
82.     border-right: 50px solid transparent;  
83.    }  
84.    #Rectangle {  
85.     height: 50px;  
86.     width: 100px;  
87.     float: left;  
88.     background: #afe05d;  
89.    }  
90.    #Square {  
91.     height: 100px;  
92.     width: 100px;  
93.     float: left;  
94.     background: #b02089;  
95.    }  
96.    #Ring {  
97.     width: 100px;  
98.     height: 100px;  
99.     float: left;  
100.     background-color: white;  
101.     border-radius: 80px;  
102.     border:5px #ffd700 solid;  
103.    }  
104.    #Parallelogram {  
105.     width: 120px;  
106.     height: 80px;  
107.     float: left;  
108.     margin-left: 10px;  
109.     -webkit-transform: skew(30deg);  
110.     -moz-transform: skew(230deg);  
111.     -o-transform: skew(30deg);  
112.     transform: skew(30deg);  
113.     background-color: #2eda01;  
114.    }  
115.   
116.    #FiveStar {  
117.      width: 0;  
118.      height: 0;  
119.      float: left;  
120.      margin: 20px 20px;  
121.      color: #ff0012;  
122.      position: relative;  
123.      display: block;  
124.      border-right: 80px solid transparent;  
125.      border-bottom: 60px solid #ff0012;  
126.      border-left: 80px solid transparent;  
127.      -moz-transform: rotate(35deg);  
128.      -webkit-transform: rotate(35deg);  
129.      -ms-transform: rotate(35deg);  
130.      -o-transform: rotate(35deg);  
131.    }  
132.    #FiveStar:before {  
133.      height: 0;  
134.      width: 0;  
135.      content: '';  
136.      position: absolute;  
137.      display: block;  
138.      top: -35px;  
139.      left: -50px;  
140.      border-bottom: 60px solid #ff0012;  
141.      border-left: 20px solid transparent;  
142.      border-right: 20px solid transparent;  
143.      -webkit-transform: rotate(-35deg);  
144.      -moz-transform: rotate(-35deg);  
145.      -ms-transform: rotate(-35deg);  
146.      -o-transform: rotate(-35deg);  
147.    }  
148.    #FiveStar:after {  
149.      width: 0;  
150.      height: 0;  
151.      content: '';  
152.      position: absolute;  
153.      display: block;  
154.      top: 3px;  
155.      left: -85px;  
156.      color: #ff0012;  
157.      border-right: 80px solid transparent;  
158.      border-bottom: 60px solid #ff0012;  
159.      border-left: 80px solid transparent;  
160.      -webkit-transform: rotate(-70deg);  
161.      -moz-transform: rotate(-70deg);  
162.      -ms-transform: rotate(-70deg);  
163.      -o-transform: rotate(-70deg);  
164.    }  
165.   
166.    #SixStar{  
167.      width: 0;  
168.      height: 0;  
169.      float: left;  
170.      border-left: 50px solid transparent;  
171.      border-right: 50px solid transparent;  
172.      border-bottom: 100px solid #cfd810;  
173.      position: relative;  
174.     }  
175.     #SixStar:after{  
176.      width: 0;  
177.      height: 0;  
178.      content: "";  
179.      border-top: 100px solid #cfd810;  
180.      border-left: 50px solid transparent;  
181.      border-right: 50px solid transparent;  
182.      position: absolute;  
183.      top: 30px;  
184.      left: -50px;  
185.     }  
186.   
187.     #Pentagon{  
188.       width: 60px;  
189.       float: left;  
190.       position: relative;  
191.       border-width: 52px 20px 0;  
192.       border-style: solid;  
193.       border-color: #711ee2 transparent;  
194.     }  
195.     #Pentagon:before{  
196.       content: "";  
197.       position: absolute;  
198.       width: 0;  
199.       height: 0;  
200.       top: -92px;  
201.       left: -20px;  
202.       border-width: 0 50px 40px;  
203.       border-style: solid;  
204.       border-color: transparent transparent #711ee2;  
205.     }  
206.   
207.     #Hexagon {  
208.       width: 100px;  
209.       height: 55px;  
210.       float: left;  
211.       background: #000001;  
212.       position: relative;  
213.       margin: 10px auto;  
214.     }  
215.     #Hexagon:before {  
216.       content: "";  
217.       width: 0;  
218.       height: 0;  
219.       position: absolute;  
220.       top: -25px;  
221.       left: 0;  
222.       border-left: 50px solid transparent;  
223.       border-right: 50px solid transparent;  
224.       border-bottom: 25px solid #000001;  
225.    }  
226.    #Hexagon:after {  
227.      content: "";  
228.      width: 0;  
229.      height: 0;  
230.      position: absolute;  
231.      bottom: -25px;  
232.      left: 0;  
233.      border-left: 50px solid transparent;  
234.      border-right: 50px solid transparent;  
235.      border-top: 25px solid #000001;  
236.    }  
237.   
238.    #Octagon{  
239.     width: 100px;  
240.     height: 100px;  
241.     float: left;  
242.     margin: 10px 10px;  
243.     background-color: #66e006;  
244.     position: relative;  
245.    }  
246.    #Octagon:before{  
247.     width: 42px;  
248.     height: 0;  
249.     top: 0;  
250.     left: 0;  
251.     position: absolute;  
252.     content: "";  
253.     border-left: 29px solid #ffffff;  
254.     border-right: 29px solid #ffffff;  
255.     border-bottom: 29px solid #66e006;  
256.    }  
257.    #Octagon:after{  
258.     width: 42px;  
259.     height: 0;  
260.     left: 0;  
261.     bottom: 0;  
262.     position: absolute;  
263.     content: "";  
264.     border-left: 29px solid #ffffff;  
265.     border-right: 29px solid #ffffff;  
266.     border-top: 29px solid #66e006;  
267.    }  
268.   
269.    #Heart {  
270.     float: left;  
271.     position: relative;  
272.    }  
273.    #Heart:before, #Heart:after {  
274.     content: "";  
275.     width: 70px;  
276.     height: 115px;  
277.     position: absolute;  
278.     background: red;  
279.     left: 70px;  
280.     top: 0;  
281.     -webkit-border-radius: 50px 50px 0 0;  
282.     -moz-border-radius: 50px 50px 0 0;  
283.     border-radius: 50px 50px 0 0;  
284.     -webkit-transform: rotate(-45deg);  
285.     -moz-transform: rotate(-45deg);  
286.     -ms-transform: rotate(-45deg);  
287.     -o-transform: rotate(-45deg);  
288.     transform: rotate(-45deg);  
289.     -webkit-transform-origin: 0 100%;  
290.     -moz-transform-origin: 0 100%;  
291.     -ms-transform-origin: 0 100%;  
292.     -o-transform-origin: 0 100%;  
293.     transform-origin: 0 100%;  
294.   }  
295.   #Heart:after {  
296.     left: 0;  
297.     -webkit-transform: rotate(45deg);  
298.     -moz-transform: rotate(45deg);  
299.     -ms-transform: rotate(45deg);  
300.     -o-transform: rotate(45deg);  
301.     transform: rotate(45deg);  
302.     -webkit-transform-origin: 100% 100%;  
303.     -moz-transform-origin: 100% 100%;  
304.     -ms-transform-origin: 100% 100%;  
305.     -o-transform-origin: 100% 100%;  
306.     transform-origin: 100% 100%;  
307.    }  
308.   
309.    #Egg {  
310.     width: 100px;  
311.     height: 160px;  
312.     float: left;  
313.     background: #ffb028;  
314.     display: block;  
315.     -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
316.     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
317.    }  
318.   
319.    #Infinity {  
320.     width: 220px;  
321.     height: 100px;  
322.     float: left;  
323.     position: relative;  
324.    }  
325.    #Infinity:before, #Infinity:after {  
326.     content: "";  
327.     width: 60px;  
328.     height: 60px;  
329.     position: absolute;  
330.     top: 0;  
331.     left: 0;  
332.     border: 20px solid #008bb0;  
333.     -moz-border-radius: 50px 50px 0;  
334.     border-radius: 50px 50px 0 50px;  
335.     -webkit-transform: rotate(-45deg);  
336.     -moz-transform: rotate(-45deg);  
337.     -ms-transform: rotate(-45deg);  
338.     -o-transform: rotate(-45deg);  
339.     transform: rotate(-45deg);  
340.    }  
341.    #Infinity:after {  
342.     left: auto;  
343.     right: 0;  
344.     -moz-border-radius: 50px 50px 50px 0;  
345.     border-radius: 50px 50px 50px 0;  
346.     -webkit-transform: rotate(45deg);  
347.     -moz-transform: rotate(45deg);  
348.     -ms-transform: rotate(45deg);  
349.     -o-transform: rotate(45deg);  
350.     transform: rotate(45deg);  
351.    }  
352.   
353.    #CommentBubble {  
354.      width: 140px;  
355.      height: 100px;  
356.      margin: 30px 20px;  
357.      float: left;  
358.      background: #8867b9;  
359.      position: relative;  
360.      -moz-border-radius: 12px;  
361.      -webkit-border-radius: 12px;  
362.      border-radius: 12px;  
363.    }  
364.    #CommentBubble:before {  
365.      content: "";  
366.      width: 0;  
367.      height: 0;  
368.      right: 100%;  
369.      top: 38px;  
370.      position: absolute;  
371.      border-top: 13px solid transparent;  
372.      border-right: 26px solid #8867b9;  
373.      border-bottom: 13px solid transparent;  
374.    }  
375.   
376.    #Diamonds{  
377.      width: 50px;  
378.      height: 0;  
379.      float: left;  
380.      border-style: solid;  
381.      border-color: transparent transparent #9aff02 transparent;  
382.      border-width: 0 25px 25px 25px;  
383.      position: relative;  
384.      margin: 20px 0 50px 0;  
385.    }  
386.    #Diamonds:after{  
387.      width: 0;  
388.      height: 0;  
389.      top: 25px;  
390.      left: -25px;  
391.      border-style: solid;  
392.      border-color: #9aff02 transparent transparent transparent;  
393.      border-width: 70px 50px 0 50px;  
394.      position: absolute;  
395.      content: "";  
396.     }  
397.   
398.     #EightDiagrams{  
399.      width: 96px;  
400.      height: 48px;  
401.      margin: 20px 20px;  
402.      float: left;  
403.      background-color: #ffffff;  
404.      border-color: #000000;  
405.      border-style: solid;  
406.      border-width: 2px 2px 50px 2px;  
407.      border-radius: 100%;  
408.      position: relative;  
409.     }  
410.     #EightDiagrams:before {  
411.      width: 12px;  
412.      height: 12px;  
413.      top: 50%;  
414.      left: 0;  
415.      content: "";  
416.      position: absolute;  
417.      background-color: #ffffff;  
418.      border: 18px solid #000000;  
419.      border-radius: 100%;  
420.     }  
421.     #EightDiagrams:after {  
422.      width: 12px;  
423.      height: 12px;  
424.      top: 50%;  
425.      left: 50%;  
426.      background-color: #000000;  
427.      border: 18px solid #ffffff;  
428.      border-radius:100%;  
429.      content: "";  
430.      position: absolute;  
431.     }  
432.   
433.     #PacMan {  
434.      width: 0;  
435.      height: 0;  
436.      float: left;  
437.      border-right: 60px solid transparent;  
438.      border-left: 60px solid #300fed;  
439.      border-top: 60px solid #300fed;  
440.      border-bottom: 60px solid #300fed;  
441.      border-top-left-radius: 60px;  
442.      border-top-right-radius: 60px;  
443.      border-bottom-left-radius: 60px;  
444.      border-bottom-right-radius: 60px;  
445.     }  
446.   
447.     #Sector {  
448.       width:0;  
449.       height:0;  
450.       float: left;  
451.       background-color: #ffffff;  
452.       border-left: 70px solid transparent;  
453.       border-right: 70px solid transparent;  
454.       border-top: 100px solid #ab9ed1;  
455.       border-radius:50%;  
456.     }  
457.   
458.     #CrescentMoon{  
459.       width:80px;  
460.       height:80px;  
461.       float: left;  
462.       background-color: #ffffff;  
463.       border-radius:50%;  
464.       box-shadow: 15px 15px 0 0 #9600d2;  
465.     }  
466.   
467.     #TopLeftTriangle {  
468.       width: 0px;  
469.       height: 0px;  
470.       margin: 10px 10px;  
471.       float: left;  
472.       border-top: 100px solid #7efde1;  
473.       border-right: 100px solid transparent;  
474.     }  
475.     #TopRightTriangle {  
476.       width: 0px;  
477.       height: 0px;  
478.       margin: 10px 10px;  
479.       float: left;  
480.       border-top: 100px solid #400526;  
481.       border-left: 100px solid transparent;  
482.     }  
483.     #BottomLeftTriangle {  
484.      width: 0px;  
485.      height: 0px;  
486.      margin: 10px 10px;  
487.      float: left;  
488.      border-bottom: 100px solid #600ffe;  
489.      border-right: 100px solid transparent;  
490.     }  
491.     #BottomRightTriangle {  
492.      width: 0px;  
493.      height: 0px;  
494.      margin: 10px 10px;  
495.      float: left;  
496.      border-bottom: 100px solid #ff7578;  
497.      border-left: 100px solid transparent;  
498.     }  
499.   
500.     #Burst8 {  
501.      width: 80px;  
502.      height: 80px;  
503.      margin: 10px 10px;  
504.      float: left;  
505.      background-color: #cf7668;  
506.      position: relative;  
507.      transform:rotate(20deg);  
508.      -webkit-transform:rotate(20deg);  
509.      -ms-transform:rotate(20deg);  
510.      -moz-transform:rotate(20deg);  
511.      -o-transform:rotate(20deg);  
512.     }  
513.     #Burst8:before{  
514.      width: 80px;  
515.      height: 80px;  
516.      top: 0;  
517.      left: 0;  
518.      background-color: #cf7668;  
519.      position: absolute;  
520.      content: "";  
521.      transform:rotate(135deg);  
522.      -webkit-transform:rotate(135deg);  
523.      -ms-transform:rotate(135deg);  
524.      -moz-transform:rotate(135deg);  
525.      -o-transform:rotate(135deg);  
526.     }  
527.   
528.     #Burst12 {  
529.       width: 80px;  
530.       height: 80px;  
531.       margin: 20px 20px;  
532.       float: left;  
533.       background-color: #a8ff26;  
534.       position: relative;  
535.       text-align: center;  
536.     }  
537.     #Burst12:before, #Burst12:after{  
538.       width: 80px;  
539.       height: 80px;  
540.       top: 0;  
541.       left: 0;  
542.       background-color: #a8ff26;  
543.       position: absolute;  
544.       content: "";  
545.     }  
546.     #Burst12:before{  
547.       transform:rotate(30deg);  
548.       -webkit-transform:rotate(30deg);  
549.       -ms-transform:rotate(30deg);  
550.       -moz-transform:rotate(30deg);  
551.       -o-transform:rotate(30deg);  
552.     }  
553.     #Burst12:after{  
554.       transform:rotate(60deg);  
555.       -webkit-transform:rotate(60deg);  
556.       -ms-transform:rotate(60deg);  
557.       -moz-transform:rotate(60deg);  
558.       -o-transform:rotate(60deg);  
559.     }  
560.   </style>  
561. </head>  
562. <body>  
563.   <!-- 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半 -->  
564.   <div id="Circle"></div>  
565.   <!-- 椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半 -->  
566.   <div id="Oval"></div>  
567.   <!-- 三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid -->  
568.   <div id="Triangle"></div>  
569.   <!-- 倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid -->  
570.   <div id="InvertedTriangle"></div>  
571.   <!-- 左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid -->  
572.   <div id="LeftTriangle"></div>  
573.   <!-- 右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid -->  
574.   <div id="RightTriangle"></div>  
575.   <!-- 菱形：使用transform和rotate相结合，使两个正反三角形上下显示 -->  
576.   <div id="Diamond"></div>  
577.   <!-- 梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度 -->  
578.   <div id="Trapezium"></div>  
579.   <!-- 长方形：宽比高长 -->  
580.   <div id="Rectangle"></div>  
581.   
582.   <!-- 浮动Div换行 -->  
583.   <div style="clear:both">  
584.   <!-- 正方形：宽和高相等 -->  
585.   <div id="Square"></div>  
586.   <!-- 圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同 -->  
587.   <div id="Ring"></div>  
588.   <!-- 平行四边形：使用transform使长方形倾斜一个角度 -->  
589.   <div id="Parallelogram"></div>  
590.   <!-- 五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边 -->  
591.   <div id="FiveStar"></div>  
592.   <!-- 六角星：使用transform属性来旋转不同的边 -->  
593.   <div id="SixStar"></div>  
594.   <!-- 五边形：可以采用三角形和梯形组合 -->  
595.   <div id="Pentagon"></div>  
596.   <!-- 六边形：在长方形上面和下面各放置一个三角形 -->  
597.   <div id="Hexagon"></div>  
598.   <!-- 八边形：在长方形上面和下面各放置一个梯形 -->  
599.   <div id="Octagon"></div>  
600.   <!-- 心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点 -->  
601.   <div id="Heart"></div>  
602.   
603.   <!-- 浮动Div换行 -->  
604.   <div style="clear:both">  
605.   <!-- 蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性 -->  
606.   <div id="Egg"></div>  
607.   <!-- 无穷符号：通过border属性和设置伪元素的角度来实现 -->  
608.   <div id="Infinity"></div>  
609.   <!-- 消息提示框：一个圆角矩形加左边中间的一个小三角形 -->  
610.   <div id="CommentBubble"></div>  
611.   <!-- 钻石：上面一个梯形，下面一个三角形组成 -->  
612.   <div id="Diamonds"></div>  
613.   <!-- 八卦图：多个圆形的组合-->  
614.   <div id="EightDiagrams"></div>  
615.   <!-- 食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性-->  
616.   <div id="PacMan"></div>  
617.   <!-- 扇形：在三角形的基础上，让其中一边成弧形 -->  
618.   <div id="Sector"></div>  
619.   <!-- 月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙 -->  
620.   <div id="CrescentMoon"></div>  
621.   
622.   <!-- 浮动Div换行 -->  
623.   <div style="clear:both">  
624.   <!-- 顶左直角三角形 -->  
625.   <div id="TopLeftTriangle"></div>  
626.   <!-- 顶右直角三角形 -->  
627.   <div id="TopRightTriangle"></div>  
628.   <!-- 底左直角三角形 -->  
629.   <div id="BottomLeftTriangle"></div>  
630.   <!-- 底右直角三角形 -->  
631.   <div id="BottomRightTriangle"></div>  
632.   <!-- 八角形 -->  
633.   <div id="Burst8"></div>  
634.   <!-- 十二角形 -->  
635.   <div id="Burst12"></div>  
636. </body>  
637. </html>  

        多角形绘制比较复杂，比如五角星，八角形等。

      心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。 

      以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

           

      转自：http://blog.csdn.net/wp1603710463/article/details/51180912