#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}
2、椭圆
#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}
3、等边三角
#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}
4、五角星
#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}
5、爱心
#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-radius:50px 50px 0 0-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-transform-origin:0 100%-moz-transform-origin:0 100%-ms-transform-origin:0 100%-o-transform-origin:0 100%transform-origin:0 100%}#heart:after{left:0-webkit-transform:rotate(45deg)-moz-transform:rotate(45deg)-ms-transform:rotate(45deg)-o-transform:rotate(45deg)transform:rotate(45deg)-webkit-transform-origin:100% 100%-moz-transform-origin:100% 100%-ms-transform-origin:100% 100%-o-transform-origin:100% 100%transform-origin:100% 100%}
6、倒三角
#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }
css里面有个属性叫clip-path，可以把长方形的css元素切割为不规则图形，点击响应的区域也只有切割后的图形才能响应。因此可以利用这个属性生成一下简单的图形。有个工具可以帮助我们生成不规则图形，地址:
借助这个工具，我们就能生成各种简单图形了，比如:
箭头:
向右的箭头:
关闭的叉:
三角形箭头:
注意:iOS浏览器iOS7以上支持，android浏览器4.4以上支持。opera浏览器全部不支持。iE全部不支持。
不会今日学习内容：2D转换之位移、旋转(包括旋转原点的设置)、缩放、倾斜；3D转换之位移、旋转、缩放、倾斜。
总结如下要点：
(一)2D转换
(若想看到变换效果，要给图形的盒子设置过渡transition:3s)
1.位移
语法=>transform:translate(x,y)
其中x表示水平方向的位移(即左右)，y表示垂直方向的位移(即上下)。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素(如100px，-100px)，也可以为百分比(如50%，-50%)。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2.旋转
语法=>transform：rotate()
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
