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属性为宽度或高度的一半。
效果图：
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属性为高度除以高度一半。
效果图：
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。
效果图：
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。
效果图：
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。
效果图：
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。
效果图：
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相结合，使两个正反三角形上下显示。
效果图：
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.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。
效果图：
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.长方形：宽比高长。
效果图：
1 #Rectangle { 2 height: 50px; 3 width: 100px; 4 float: left; 5 background: #afe05d; 6 }
10.正方形：宽和高相等。
效果图：
1 #Square { 2 height: 100px; 3 width: 100px; 4 float: left; 5 background: #b02089; 6 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
完整的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>
多角形绘制比较复杂，比如五角星，八角形等。
心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。
以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。