CSS常见的图形绘图

1.圆形

.circle{    
		width: 100px;      
		height: 100px;      
		background-color:red;      
		border-radius: 50%;      
		-moz-border-radius: 50%;      
		-webkit-border-radius: 50%;    
} 

2.正方形

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

3.长方形

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

4.椭圆

#oval {
	width: 200px;
	height: 100px;
	background: red;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	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