CSS3实现32种基本图形

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

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

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

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

效果图：

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    }

View Code

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

效果图：

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    }

View Code

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

效果图：

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    }

View Code

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

效果图：

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    }

View Code

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

效果图：

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    }

View Code

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

效果图：

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    }

View Code

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

效果图：

 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    }

View Code

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

效果图：

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    }

View Code

9.长方形：宽比高长。

效果图：

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

View Code

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

效果图：

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

View Code

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

效果图：

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    }

View Code

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

效果图：

 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    }

View Code

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

效果图：

 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    }

View Code

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

效果图：

 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     }

View Code

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

效果图：

 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    }

View Code

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

效果图：

 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     }

View Code

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

效果图：

 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    }

View Code

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

效果图：

 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    }

View Code

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

效果图：

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    }

View Code

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

效果图：

 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    }

View Code

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

效果图：

 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    }

View Code

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

效果图：

 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     }

View Code

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

效果图：

 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     }

View Code

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

效果图：

 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     }

View Code

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

效果图：

 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     }

View Code

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

效果图：

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     }

View Code

27.顶左直角三角形。

效果图：

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     }

View Code

28.顶右直角三角形。

效果图：

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     }

View Code

29.底左直角三角形。

效果图：

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     }

View Code

30.底右直角三角形。

效果图：

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     }

View Code

31.八角形。

效果图：

 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     }

View Code

32.十二角形。

效果图：

 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     }

View Code

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

效果图：

  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>

View Code

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

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

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

相关阅读:
Java n个线程轮流打印数字的问题
 【我所认知的BIOS】—> uEFI AHCI Driver(6) AtaAtapiPassThruSupported的局部变量们
 设备树学习之（二）点灯【转】
设备树学习之（一）GPIO中断【转】
S5PV210开发板 VGA测试【转】
Linux VGA驱动移植实验【转】
略过天涯深入浅出VGA和DVI接口【转】
基于FPGA的VGA可移植模块终极设计【转】
字符串函数---strcmp()与strncmp()详解及实现【转】
关于内存中栈和堆的区别（非数据结构中的堆和栈，区别）
原文地址：https://www.cnblogs.com/wp5719/p/5412217.html