css3制作图形

注：（仅支持IE8+）推荐使用chrome浏览器浏览

 

椭圆

.div_1{
	width:100px;
	height:50px;
	border-radius:50px / 25px;
	background:#09f;
}

 

正三角

.div_2{
	width:0px;
	height:0px;
	border-bottom:100px solid #09f;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
}

 

倒三角

.div_3{
	width:0px;
	height:0px;
	border-top:100px solid #09f;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
}

 

梯形

.div_4{
	width:20px;
	height:0px;
	border-bottom:40px solid #09f;
	border-left:40px solid transparent;
	border-right:40px solid transparent;
}

 

菱形

.div_5{
	width: 100px;   
  height: 100px;   
  background: #09f;
	margin:20px 0px;
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg); 
}

 

平行四边形

.div_6{
	width:100px;
	height:60px;
	background:#09f;
	
	transform: skew(20deg);
	-o-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-webkit-transform: skew(20deg);
}

 

 

心形

.div_7{   
    position: relative;  
}  
.div_7:before, .div_7:after {  
    position: absolute;  
  content: "";  
    left: 70px; 
		top: 0;  
    width: 70px;  
    height: 115px;  
    background: #09f;  
    -moz-border-radius: 50px 50px 0 0;  
    border-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%;  
}  
.div_7: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%;  
}