css基本图形绘制（基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等）

  1. 正方形：
    • 代码：
    • 1 <style>
2     .square {
3         width: 100px;
4         height: 100px;
5         background-color: cornflowerblue;
6     }
7 </style>
8 <div class="square "></div>
    • 效果：
  2. 长方形：
    • 代码： 
      • 1 <style>
2     .rectangle  {
3         width: 200px;
4         height: 100px;
5         background-color: cornflowerblue;
6     }
7 </style>
8 <div class="rectangle  "></div>
    • 效果：
  3. 圆形：
    • 代码： 
       1 <style>
 2     .circle  {
 3         width: 100px;
 4         height: 100px;
 5         background-color: cornflowerblue;
 6         -moz-border-radius: 50px; 
 7         -webkit-border-radius: 50px; 
 8         border-radius: 50px; 
 9     }
10 </style>
11 <div class="circle"></div>
    • 效果：
  4. 椭圆：
    • 代码： 
       1 <style>
 2     .oval   {
 3         width: 200px;
 4         height: 100px;
 5         background-color: cornflowerblue;
 6         -moz-border-radius: 100px / 50px; 
 7         -webkit-border-radius: 100px / 50px; 
 8         border-radius: 100px / 50px; 
 9     }
10 </style>
11 <div class="oval "></div>
    • 效果：
  5. 上三角：
    • 代码： 
       1 <style>
 2     .triangle-up{
 3         width: 0; 
 4         height: 0; 
 5         border-left: 50px solid transparent; 
 6         border-right: 50px solid transparent; 
 7         border-bottom: 100px solid cornflowerblue; 
 8     }
 9 </style>
10 <div class="triangle-up"></div>
    • 效果：
  6. 下三角：
    • 代码： 
       1 <style>
 2     .triangle-down{
 3         width: 0; 
 4         height: 0; 
 5         border-left: 50px solid transparent; 
 6         border-right: 50px solid transparent; 
 7         border-top: 100px solid cornflowerblue; 
 8     }
 9 </style>
10 <div class="triangle-down"></div>
    • 效果：
  7. 左三角：
    • 代码： 
       1 <style>
 2     .triangle-left{
 3         width: 0; 
 4         height: 0; 
 5         border-top: 50px solid transparent; 
 6         border-right: 100px solid cornflowerblue; 
 7         border-bottom: 50px solid transparent; 
 8     }
 9 </style>
10 <div class="triangle-left"></div>
    • 效果：
  8. 右上角：
    • 代码： 
       1 <style>
 2     .triangle-right{
 3         width: 0; 
 4         height: 0; 
 5         border-top: 50px solid transparent; 
 6         border-left: 100px solid cornflowerblue; 
 7         border-bottom: 50px solid transparent; 
 8     }
 9 </style>
10 <div class="triangle-right"></div>
    • 效果：
  9. 左上三角：
    • 代码： 
      1 <style>
2     .triangle-topleft{
3         width: 0; 
4         height: 0; 
5         border-top: 100px solid cornflowerblue; 
6         border-right: 100px solid transparent; 
7     }
8 </style>
9 <div class="triangle-topleft"></div>
    • 效果：
  10. 右上三角：
    • 代码： 
      1 <style>
2     .triangle-topright{
3         width: 0; 
4         height: 0; 
5         border-top: 100px solid cornflowerblue; 
6         border-left: 100px solid transparent;
7     }
8 </style>
9 <div class="triangle-topright"></div>
    • 效果：
  11. 左下三角：
    • 代码： 
      1 <style>
2     .triangle-bottomleft{
3         width: 0; 
4         height: 0; 
5         border-bottom: 100px solid cornflowerblue; 
6         border-right: 100px solid transparent;
7     }
8 </style>
9 <div class="triangle-bottomleft"></div>
    • 效果：
  12. 右下三角：
    • 代码： 
      1 <style>
2     .triangle-bottomright{
3         width: 0; 
4         height: 0; 
5         border-bottom: 100px solid cornflowerblue; 
6         border-left: 100px solid transparent;
7     }
8 </style>
9 <div class="triangle-bottomright"></div>
    • 效果：
  13. 平行四边形：
    • 代码： 
       1 <style>
 2     .parallelogram{
 3         width: 150px;
 4         height: 100px;
 5         -webkit-transform: skew(20deg); 
 6         -moz-transform: skew(20deg); 
 7         -o-transform: skew(20deg); 
 8         background: cornflowerblue;
 9     }
10 </style>
11 <div class="parallelogram"></div>
    • 效果：
  14. 梯形：
    • 代码： 
       1 <style>
 2     .trapezoid { 
 3         border-bottom: 100px solid cornflowerblue; 
 4         border-left: 50px solid transparent; 
 5         border-right: 50px solid transparent; 
 6         height: 0; 
 7         width: 100px;
 8     }
 9 </style>
10 <div class="trapezoid"></div>
    • 效果：
  15. 六角星：
    • 代码： 
       1 <style>
 2     .star-six {
 3         width: 0; 
 4         height: 0; 
 5         border-left: 50px solid transparent; 
 6         border-right: 50px solid transparent; 
 7         border-bottom: 100px solid cornflowerblue; 
 8         position: relative; 
 9     } 
10     .star-six:after { 
11         width: 0; 
12         height: 0; 
13         border-left: 50px solid transparent; 
14         border-right: 50px solid transparent; 
15         border-top: 100px solid cornflowerblue; 
16         position: absolute; 
17         content: ""; 
18         top: 30px; 
19         left: -50px;
20     }
21 </style>
22 <div class="star-six"></div>
    • 效果：
  16. 五角星：
    • 代码： 
       1 <style>
 2     .star-five {
 3         position: relative;
 4         display: block;
 5         color: cornflowerblue;
 6         width: 0px;
 7         height: 0px;
 8         border-right: 100px solid transparent;
 9         border-bottom: 70px solid cornflowerblue;
10         border-left: 100px solid transparent;
11         -moz-transform: rotate(35deg);
12         -webkit-transform: rotate(35deg);
13         -ms-transform: rotate(35deg);
14         -o-transform: rotate(35deg);
15     }
16     
17     .star-five:before {
18         border-bottom: 80px solid cornflowerblue;
19         border-left: 30px solid transparent;
20         border-right: 30px solid transparent;
21         position: absolute;
22         height: 0;
23         width: 0;
24         top: -45px;
25         left: -65px;
26         display: block;
27         content: '';
28         -webkit-transform: rotate(-35deg);
29         -moz-transform: rotate(-35deg);
30         -ms-transform: rotate(-35deg);
31         -o-transform: rotate(-35deg);
32     }
33     
34     .star-five:after {
35         position: absolute;
36         display: block;
37         color: cornflowerblue;
38         top: 3px;
39         left: -105px;
40         width: 0px;
41         height: 0px;
42         border-right: 100px solid transparent;
43         border-bottom: 70px solid cornflowerblue;
44         border-left: 100px solid transparent;
45         -webkit-transform: rotate(-70deg);
46         -moz-transform: rotate(-70deg);
47         -ms-transform: rotate(-70deg);
48         -o-transform: rotate(-70deg);
49         content: '';
50     }
51 </style>
52 <div class="star-five"></div>
    • 效果：
  17. 五角大楼：
    • 代码： 
       1 <style>
 2 .pentagon { 
 3     position: relative; 
 4     width: 54px; 
 5     border-width: 50px 18px 0; 
 6     border-style: solid; 
 7     border-color: cornflowerblue transparent; 
 8 } 
 9 .pentagon:before { 
10     content: ""; 
11     position: absolute; 
12     height: 0; 
13     width: 0; 
14     top: -85px; 
15     left: -18px; 
16     border-width: 0 45px 35px; 
17     border-style: solid; 
18     border-color: transparent transparent cornflowerblue; 
19 }
20 </style>
21 <div class="pentagon"></div>
    • 效果：
  18. 六边形：
    • 代码： 
       1 <style>
 2 .hexagon{ 
 3     width: 100px; 
 4     height: 55px; 
 5     background: cornflowerblue; 
 6     position: relative; 
 7 } 
 8 .hexagon:before{ 
 9     content: ""; 
10     position: absolute; 
11     top: -25px; 
12     left: 0; 
13     width: 0; 
14     height: 0; 
15     border-left: 50px solid transparent; 
16     border-right: 50px solid transparent; 
17     border-bottom: 25px solid cornflowerblue; 
18 } 
19 .hexagon:after{ 
20     content: ""; 
21     position: absolute; 
22     bottom: -25px; 
23     left: 0; 
24     width: 0; 
25     height: 0; 
26     border-left: 50px solid transparent; 
27     border-right: 50px solid transparent; 
28     border-top: 25px solid cornflowerblue; 
29 }
30 </style>
31 <div class="hexagon"></div>
    • 效果：
  19. 八角形：
    • 代码： 
       1 <style>
 2 .octagon { 
 3     width: 100px; 
 4     height: 100px; 
 5     background: cornflowerblue; 
 6     position: relative; 
 7 } 
 8 .octagon:before { 
 9     content: ""; 
10     position: absolute; 
11     top: 0; 
12     left: 0; 
13     border-bottom: 29px solid cornflowerblue; 
14     border-left: 29px solid #eee; 
15     border-right: 29px solid #eee; 
16     width: 42px; 
17     height: 0; 
18 } 
19 .octagon:after { 
20     content: ""; 
21     position: absolute; 
22     bottom: 0; 
23     left: 0; 
24     border-top: 29px solid cornflowerblue; 
25     border-left: 29px solid #eee; 
26     border-right: 29px solid #eee; 
27     width: 42px; 
28     height: 0; 
29 }
30 </style>
31 <div class="octagon"></div>
    • 效果：
  20. 爱心：
    • 代码： 
       1 <style>
 2 .heart {
 3     position: relative; 
 4     width: 100px; 
 5     height: 90px; 
 6 } 
 7 .heart:before, 
 8 .heart:after { 
 9     position: absolute; 
10     content: ""; 
11     left: 50px; 
12     top: 0; 
13     width: 50px; 
14     height: 80px; 
15     background: cornflowerblue; 
16     -moz-border-radius: 50px 50px 0 0; 
17     border-radius: 50px 50px 0 0; 
18     -webkit-transform: rotate(-45deg); 
19     -moz-transform: rotate(-45deg); 
20     -ms-transform: rotate(-45deg); 
21     -o-transform: rotate(-45deg); 
22     transform: rotate(-45deg); 
23     -webkit-transform-origin: 0 100%; 
24     -moz-transform-origin: 0 100%; 
25     -ms-transform-origin: 0 100%; 
26     -o-transform-origin: 0 100%; 
27     transform-origin: 0 100%; 
28 } 
29 .heart:after {
30     left: 0; 
31     -webkit-transform: rotate(45deg); 
32     -moz-transform: rotate(45deg); 
33     -ms-transform: rotate(45deg); 
34     -o-transform: rotate(45deg); 
35     transform: rotate(45deg); 
36     -webkit-transform-origin: 100% 100%; 
37     -moz-transform-origin: 100% 100%; 
38     -ms-transform-origin: 100% 100%; 
39     -o-transform-origin: 100% 100%; 
40     transform-origin :100% 100%; 
41 }
42 </style>
43 <div class="heart"></div>
    • 效果：
  21. 无穷大符号：
    • 代码： 
       1 <style>
 2 .infinity {
 3     position: relative; 
 4     width: 212px; 
 5     height: 100px; 
 6 } 
 7 .infinity:before, 
 8 .infinity:after { 
 9     content: ""; 
10     position: absolute; 
11     top: 0; 
12     left: 0; 
13     width: 60px; 
14     height: 60px; 
15     border: 20px solid cornflowerblue; 
16     -moz-border-radius: 50px 50px 0 50px; 
17     border-radius: 50px 50px 0 50px; 
18     -webkit-transform: rotate(-45deg); 
19     -moz-transform: rotate(-45deg); 
20     -ms-transform: rotate(-45deg); 
21     -o-transform: rotate(-45deg); 
22     transform: rotate(-45deg); 
23 } 
24 .infinity:after { 
25     left: auto; 
26     right: 0; 
27     -moz-border-radius: 50px 50px 50px 0; 
28     border-radius: 50px 50px 50px 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     }
35 </style>
36 <div class="infinity"></div>
    • 效果：
  22. 鸡蛋：
    • 代码： 
       1 <style>
 2 .egg { 
 3     display:block; 
 4     width: 126px; 
 5     height: 180px; 
 6     background-color: cornflowerblue; 
 7     -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
 8     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
 9 }
10 </style>
11 <div class="egg"></div>
    • 效果：
  23. 食逗人（Pac-Man）：
    • 代码： 
       1 <style>
 2 .pacman { 
 3     width: 0px; 
 4     height: 0px; 
 5     border-right: 60px solid transparent; 
 6     border-top: 60px solid cornflowerblue; 
 7     border-left: 60px solid cornflowerblue; 
 8     border-bottom: 60px solid cornflowerblue; 
 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 }
14 </style>
15 <div class="pacman"></div>
    • 效果：
  24. 提示对话框：
    1. 代码： 
       1 <style>
 2 .talkbubble { 
 3     width: 120px; 
 4     height: 80px; 
 5     background: cornflowerblue; 
 6     position: relative; 
 7     -moz-border-radius: 10px; 
 8     -webkit-border-radius: 10px; 
 9     border-radius: 10px; 
10 } 
11 .talkbubble:before { 
12     content:""; 
13     position: absolute; 
14     right: 100%; 
15     top: 26px; 
16     width: 0; 
17     height: 0; 
18     border-top: 13px solid transparent; 
19     border-right: 26px solid cornflowerblue; 
20     border-bottom: 13px solid transparent; 
21 }
22 </style>
23 <div class="talkbubble"></div>
    2. 效果：
  25. 12角星：
    • 代码： 
       1 <style>
 2 .burst-12 { 
 3     background: cornflowerblue; 
 4     width: 80px; 
 5     height: 80px; 
 6     position: relative; 
 7     text-align: center; 
 8 } 
 9 .burst-12:before, .burst-12:after { 
10     content: ""; 
11     position: absolute; 
12     top: 0; 
13     left: 0; 
14     height: 80px; 
15     width: 80px; 
16     background: cornflowerblue; 
17 } 
18 .burst-12:before { 
19     -webkit-transform: rotate(30deg); 
20     -moz-transform: rotate(30deg); 
21     -ms-transform: rotate(30deg); 
22     -o-transform: rotate(30deg); 
23     transform: rotate(30deg); 
24 } 
25 .burst-12:after { 
26     -webkit-transform: rotate(60deg); 
27     -moz-transform: rotate(60deg); 
28     -ms-transform: rotate(60deg); 
29     -o-transform: rotate(60deg); 
30     transform: rotate(60deg); 
31 }
32 </style>
33 <div class="burst-12"></div>
    • 效果：
  26. 8角星：
    • 代码： 
       1 <style>
 2 .burst-8 { 
 3     background: cornflowerblue; 
 4     width: 80px; 
 5     height: 80px; 
 6     position: relative; 
 7     text-align: center; 
 8     -webkit-transform: rotate(20deg); 
 9     -moz-transform: rotate(20deg); 
10     -ms-transform: rotate(20deg); 
11     -o-transform: rotate(20eg); 
12     transform: rotate(20deg); 
13 } 
14 .burst-8:before { 
15     content: ""; 
16     position: absolute; 
17     top: 0; 
18     left: 0; 
19     height: 80px; 
20     width: 80px; 
21     background: cornflowerblue; 
22     -webkit-transform: rotate(135deg); 
23     -moz-transform: rotate(135deg); 
24     -ms-transform: rotate(135deg); 
25     -o-transform: rotate(135deg); 
26     transform: rotate(135deg); 
27 }
28 </style>
29 <div class="burst-8"></div>
    • 效果：
  27. 钻石：　　
    • 代码： 
       1 <style>
 2 .cut-diamond { 
 3     border-style: solid; 
 4     border-color: transparent transparent cornflowerblue transparent; 
 5     border-width: 0 25px 25px 25px; 
 6     height: 0; 
 7     width: 50px; 
 8     position: relative; 
 9 } 
10 .cut-diamond:after { 
11     content: ""; 
12     position: absolute; 
13     top: 25px; 
14     left: -25px; 
15     width: 0; 
16     height: 0; 
17     border-style: solid; 
18     border-color: cornflowerblue transparent transparent transparent; 
19     border-width: 70px 50px 0 50px; 
20 }
21 </style>
22 <div class="cut-diamond"></div>
    • 效果：
  28. 阴阳八卦（霸气的这个）：
    • 代码： 
       1 <style>
 2 .yin-yang { 
 3     width: 96px; 
 4     height: 48px; 
 5     background: #eee; 
 6     border-color: cornflowerblue; 
 7     border-style: solid; 
 8     border-width: 2px 2px 50px 2px; 
 9     border-radius: 100%; 
10     position: relative; 
11 } 
12 .yin-yang:before { 
13     content: ""; 
14     position: absolute; 
15     top: 50%; 
16     left: 0; 
17     background: #eee; 
18     border: 18px solid cornflowerblue; 
19     border-radius: 100%; 
20     width: 12px; 
21     height: 12px; 
22 } 
23 .yin-yang:after { 
24     content: ""; 
25     position: absolute; 
26     top: 50%; 
27     left: 50%; 
28     background: cornflowerblue; 
29     border: 18px solid #eee; 
30     border-radius:100%; 
31     width: 12px; 
32     height: 12px; 
33 }
34 </style>
35 <div class="yin-yang"></div>
    • 效果：
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/panda-ling/p/6285036.html