纯CSS绘图

基于今天的面试问题“使用CSS画一个三角形”，特作此总结。

参考链接：http://www.jb51.net/css/41448.html

图形包括基本的矩形，圆形，椭圆，三角形，多边形，也包括一些复杂的爱心，钻石，阴阳八卦等。

1.正方形

#square{
				width:100px;
				height:100px;
				background:red;
			}

2.长方形

#rectangle{
				width:200px;
				height:100px;
				background:red;
			}

3.圆形

#circle{
				width:100px;
				height:100px;
				background:red;
				border-radius:50px;
				/*以下为兼容*/
				-moz-border-radius:50px;
				-webkit-border-radius:50px;
			}

4.椭圆

扫描二维码关注公众号，回复： 3354123 查看本文章

#oval{
				width:200px;
				height:100px;
				background:red;
				border-radius:100px / 50px;/*/前面的值设置元素圆角的水平方向半径，后面的值设置垂直方向的半径*/
			}

5.上三角

#triangle-up{
				width:0;
				height:0;
				border-left:50px solid transparent;
				border-right:50px solid transparent;
				border-bottom:100px solid red;
			}

6.下三角

#triangle-down{
				width:0;
				height:0;
				border-left:50px solid transparent;
				border-right:50px solid transparent;
				border-top:100px solid red;
			}

7.左三角

#triangle-left{
				width:0;
				height:0;
				border-top:50px solid transparent;
				border-right:100px solid red;
				border-bottom:50px solid transparent;
			}

8.右三角

#triangle-right{
				width:0;
				height:0;
				border-top:50px solid transparent;
				border-bottom:50px solid transparent;
				border-left:100px solid red;
			}

9.左上三角

#triangle-topleft{
				width:0;
				height:0;
				border-top:100px solid red;
				border-right:100px solid transparent;
			}

10.右上三角

#triangle-topright{
				width:0;
				height:0;
				border-top:100px solid red;
				border-left:100px solid transparent;
			}

11.左下三角

#triangle-bottomleft{
				width:0;
				height:0;
				border-bottom:100px solid red;
				border-right:100px solid transparent;
			}

12.右下三角

#triangle-bottomright{
				width:0;
				height:0;
				border-bottom:100px solid red;
				border-left:100px solid transparent;
			}

13.平行四边形

#parallelogram{
				width:150px;
				height:100px;
				margin-left:20px;
				-webkit-transform:skew(20deg);
				-moz-transform:skew(20deg);
				-o-transform:skew(20deg);
				background:red;
			}

14.梯形

#trapezoid{
				width:100px;
				height:0;
				border-bottom:100px solid red;
				border-left:50px solid transparent;
				border-right:50px solid transparent;
			}