最近在学习CSS，先从CSS画点平面图形入手，发现除了正方形、长方形此类比较简单，只要有长宽设置恰当即可，画圆要涉及radius，然后恢复到做界面的最讨厌的状态了，不断的修改设值，调整数据，所幸并不多。下面就进入正文介绍吧，先将图形以及代码摆放出来，然后讲解下如何画，以及一些小细节。
1、正方形
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 div 7 { 8 110px; 9 height:110px; 10 border-right: 1px solid yellow; 11 /*transparent 变透明*/ 12 border-left:1px solid yellow; 13 border-bottom: 1px solid pink; 14 border-top: 1px solid pink; 15 } 16 17 </style> 18 </head> 19 <body> 20 <div></div> 21 22 </body> 23 </html>
正方形就比较简单，只要设置长宽，长宽一样则为正方形，不一样则为长方形。
2、三角形
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 7 div 8 { 9 0px; 10 height:0px; 11 border-right: 50px solid transparent; 12 /*transparent 变透明*/ 13 border-left:50px solid transparent; 14 border-bottom: 100px solid transparent; 15 border-top: 100px solid pink; 16 17 18 } 19 20 21 22 </style> 23 </head> 24 <body> 25 <div></div> 26 27 </body> 28 </html>
从长方形向三角形转化，首先去除宽高的像素，这样子看上去便有了四个三角形，如何去除多余三角形，这里可以利用transparent，来将他们隐藏起来，想要三角形的位置不一样，隐藏的边界也不是一样。例如只要向下的三角形，就把左右下的三条边变透明（一般左右border一样画出来的三角形是等腰三角形，上下左右border一样画出来为等边三角形，直角三角形看你要的直角转向而定，直角三角形只要有留两个边即可，示例border-left:100px solid transparent; border-top: 100px solid pink;）
3、梯形
1 div 2 { 3 30px; 4 height:0px; 5 border-right: 50px solid transparent; 6 /*transparent 变透明*/ 7 border-left:50px solid transparent; 8 border-bottom: 100px solid transparent; 9 border-top: 100px solid pink; 10 11 12 }
梯形是在三角形的基础上，将width不设为0，便有梯形。
4、平行四边形
1 div 2 { 3 100px; 4 height:100px; 5 border:1px solid pink; 6 transform: skew(20deg,0deg); 7 -ms-transform: skew(20deg,0deg); /* IE 9 */ 8 -webkit-transform: skew(20deg,0deg); /* Safari and Chrome */ 9 10 } 11
平行四边形主要是在正方形或者长方形的基础上，利用css的transfrom:skew来拉伸扭曲，其 x 轴动，y轴不变。
5、圆形
1 div 2 { 3 4 100px; 5 height:100px; 6 border:1px solid pink; 7 border-radius: 50%; 8 -ms-border-radius: 50%; /* IE 9 */ 9 -webkit-border-radius: 50%; /* Safari and Chrome */ 10 11 12 }
radius来设置其弯曲程度（用来画圆角），border-radius:50%是指其水平弯曲程度，等价于
border-top-left-radius: 50% ;border-top-right-radius: 50% ; border-bottom-right-radius: 50% ;border-bottom-left-radius: 50% ;从左上角，右上角，左下角，右下角，四个地方分别入手。
6、蛋
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 body 7 { 8 margin: 100px; 9 text-align: center; 10 } 11 div{ 12 100px; 13 height: 140px; 14 /*等价式border-radius: 50% 50% 50% 50% / 65% 65% 40% 40%;;*/ 15 border-top-left-radius: 50% 65%; 16 border-top-right-radius: 50% 65%; 17 border-bottom-right-radius: 50% 40%; 18 border-bottom-left-radius: 50% 40%; 19 /* 水平半径，垂直半径*/ 20 border: 1px solid pink; 21 22 } 23 </style> 24 </head> 25 <body> 26 <div>I just an egg!</div> 27 28 </body> 29 </html>
radius在 / 前面设置的值也不一样，前面为水平弯曲，后面为垂直弯曲，根据设置的值不同能画出不一样的图形，比如想画个椭圆，就修改下里面的值便可。
7、五角星
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 body 7 { 8 margin: 100px; 9 } 10 div{ 11 width: 0; 12 height: 0; 13 color: red; 14 margin: 50px 0; 15 position: relative; 16 display: block; 17 border-bottom:100px solid pink; 18 border-left: 35px solid transparent; 19 border-right:35px solid transparent; 20 } 21 22 div:before{ 23 width: 0; 24 height: 0; 25 position: absolute; 26 top: -40px; 27 left: -98px; 28 color: white; 29 display: block; 30 content: ""; 31 border-right: 60px solid pink; 32 /*transparent 变透明*/ 33 border-left:90px solid transparent; 34 border-top: 90px solid transparent; 35 border-bottom: 90px solid transparent; 36 transform: rotate(56deg); 37 -moz-transform:rotate(56deg); 38 -webkit-transform:rotate(56deg); 39 -ms-transform:rotate(56deg); 40 } 41 div:after{ 42 width: 0; 43 height: 0; 44 position: absolute; 45 top: -40px; 46 left: -49px; 47 color: white; 48 display: block; 49 content: ""; 50 border-right: 60px solid pink; 51 /*transparent 变透明*/ 52 border-left:90px solid transparent; 53 border-top: 90px solid transparent; 54 border-bottom: 90px solid transparent; 55 transform: rotate(125deg); 56 -moz-transform:rotate(125deg); 57 -webkit-transform:rotate(125deg); 58 -ms-transform:rotate(125deg); 59 } 60 61 </style> 62 </head> 63 <body> 64 <div></div> 65 66 67 </body> 68 </html>
画五角星用到了伪类器，这里就不详细介绍，想了解伪类器就去百度下。这里运用伪类器，三层叠加，第一层是个三角形，第二层是一个钝角三角形，第三层也是个钝角三角形，第一层的三角形由前面的三角形构造而来，前面也讲过如何去画出不同方向的三角形以及设置。这里的角度利用rotate去旋转角度，然后通过top，left，以及position等来让他们位置重合，displace:block，来让他们叠合覆盖。
8、心形
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 body 7 { 8 margin: 100px; 9 } 10 div{ 11 12 } 13 14 div:before{ 15 position: relative; 16 top: 61px; 17 left:43px; 18 display: block; 19 content: ""; 20 position: relative; 21 display: block; 22 border-radius: 100px 100px 0px 0px; 23 background: #8AC007; 24 padding: 20px; 25 width: 40px; 26 height: 100px; 27 transform: rotate(45deg); 28 29 30 31 32 } 33 div:after{ 34 position: absolute; 35 top: -80px; 36 left:0px; 37 display: block; 38 content: ""; 39 position: relative; 40 display: block; 41 border-radius: 100px 100px 0px 0px; 42 background: #8AC007; 43 padding: 20px; 44 width: 40px; 45 height: 100px; 46 transform: rotate(-45deg); 47 48 } 49 50 </style> 51 </head> 52 <body> 53 <div></div> 54 55 56 </body> 57 </html>
画心形，我曾用来两种方法，最后采用第二种，第一种是用两个圆和正方形叠加来做，但是做出来的效果不好，不够圆滑，所以后来用第二种方法，用两个长方形来画，同时将长方形的左上角，右上角圆化，然后两者叠加，做出的效果也好看。（不要问我为什么这颗心时绿色我，青青草原也挺好的）
9、对话框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 body 7 { 8 margin: 100px; 9 } 10 div{ 11 12 } 13 14 div:before{ 15 position: relative; 16 top: 55px; 17 left:15px; 18 display: block; 19 content: ""; 20 position: relative; 21 display: block; 22 width:0px; 23 height:0px; 24 border-right: 70px solid #8AC007; 25 /*transparent 变透明*/ 26 border-left:100px solid transparent; 27 border-bottom: 10px solid transparent; 28 border-top: 10px solid transparent; 29 transform: rotate(-10deg); 30 31 } 32 div:after{ 33 position: absolute; 34 top: 0px; 35 left:150px; 36 display: block; 37 content: ""; 38 position: relative; 39 display: block; 40 background: #8AC007; 41 border-radius: 10px 10px 10px 10px; 42 padding: 20px; 43 width: 100px; 44 height: 20px; 45 box-shadow: 2px 2px #aaaaaa; 46 47 48 } 49 50 </style> 51 </head> 52 <body> 53 <div></div> 54 55 56 </body> 57 </html>
对话框是由长方形和三角形叠加而来的，同时将长方形做了四个圆角，看上去比较上眼，为了让对话框由立体感，增加了阴影效果box-shadow: 2px 2px #aaaaaa;
10、波浪框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>triangle</title> 5 <style type="text/css"> 6 body 7 { 8 margin: 100px; 9 text-align: center; 10 } 11 div{ 12 width: 100px; 13 height: 50px; 14 border-radius: 2em 1em 4em / 0.5em 3em; 15 border: 3px solid pink; 16 17 } 18 19 20 21 </style> 22 </head> 23 <body> 24 <div>Skylar!</div> 25 26 27 </body> 28 </html>
波浪框是个随机产物，但是个人觉得挺好看的保留下来。
对于CSS，个人觉得其设值是很有意思，因为你在大多数情况下，你不知道你设的值回带来什么的效果。所以，尝试深入体会其趣味。