css之-各种基本图形画法总结（css3.0）

基本设置：width 和 height

1.正方形，矩形

用border话三角形边角

用transform:skew(x angle,y angle):想x和y轴倾斜来画平行四边形

.square{width:100px;height:100px;background:red;}
/*正方形也可以*/
/*{width:0px;height:0px;border:50px solid red;}*/
.rectangle{width:200px;height:100px;background:green;}

 2.各种三角形

.triangle1{width:0px;height:0px;border:50px solid transparent;border-top:50px solid pink;}
.triangle2{width:0px;height:0px;border:50px solid transparent;border-right:50px solid purple;}
.triangle3{width:0px;height:0px;border:50px solid transparent;border-bottom:50px solid blue;}
.triangle4{width:0px;height:0px;border:50px solid transparent;border-left:50px solid lightblue;}
.triangle{width:0px;height:0px;border:50px solid transparent;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid orange;}

 3.左/右/上/下

.triangle5{width:0px;height:0px;border:50px solid transparent;
border-left:50px solid #e4f;
border-top:50px solid #e4f;}
.triangle6{width:0px;height:0px;border:50px solid transparent;
border-right:50px solid #cde;
border-top:50px solid #cde;}
.triangle7{width:0px;height:0px;border:50px solid transparent;
border-left:50px solid #c20;
border-bottom:50px solid #c20;}
.triangle8{width:0px;height:0px;border:50px solid transparent;
border-right:50px solid #ee3;
border-bottom:50px solid #ee3;}

 4.五角星

由三个非等边三角形构成

通过旋转transform:rotate(angle)和绝对定位top,left,right,bottom构成

#star-five {
margin: 50px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-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: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -0px;
left: -99px;
display: block;
content: '';
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
}
#star-five:after {
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}

 

5.平行四边形

.parallelogram{width:100px;height:100px;background:#ec3;
-webkit-transform:skew(-20deg);
-moz-transform:skew(-20deg);
-o-transform:skew(-20deg);
-ms-transform:skew(-20deg);}

 6.各种圆形（通过border-radius来设置和border-width来控制）

 

.circle1-1{width:0px;height:0px;
border-radius:80px; 
border-right:80px solid red;
border-left:80px solid yellow;
border-top:80px solid blue;
border-bottom:80px solid pink;
}

.circle1-2{width:100px;height:100px;background:#fff;
border-radius:100px; border:20px solid #699}
/*上半圆*/
.circle1-3{width: 100px; height: 0px;border:0 solid transparent;
border-top:100px solid #439;
border-right:100px solid #439;   
-moz-border-radius: 100px 100px 0 0;
-webkit-border-radius: 100px 100px 0 0; 
 border-radius: 100px 100px 0 0;
}

/*下半圆*/
.circle1-4{
width:100px;height:0px;
border-radius:0 0 100px 100px;
-webkit-border-radius:0 0 100px 100px;
-moz-border-radius:0 0 100px 100px;
-ms-border-radius:0 0 100px 100px;
-o-border-radius:0 0 100px 100px;
border:0px solid red;
border-bottom:100px solid #767;
border-left:100px solid #767;}

/*左半圆*/
.circle1-5{width:0px;height:100px;
border-radius:100px 0 0 100px;
-webkit-border-radius:100px 0 0 100px;
-moz-border-radius:100px 0 0 100px;
-o-border-radius:100px 0 0 100px;
-ms-border-radius:100px 0 0 100px;
border:0px solid transparent;
border-top:100px solid #345;
border-left:100px solid #345;
}
/*右半圆*/
.circle1-6{width:0px;height:100px;
border-radius:0 100px 100px 0;
-webkit-border-radius:0 100px 100px 0;
-o-border-radius:0 100px 100px 0;
-ms-border-radius:0 100px 100px 0;
-moz-border-radius:0 100px 100px 0;
border:0px solid transparent;
border-right:100px solid #100;
border-bottom:100px solid #100;
}

/*左上角的四分之一圆*/
.circle1-7{width:100px;height:0px;
border-radius:100px 0 0 0;
-webkit-border-radius:100px 0 0 0;
-moz-border-radius:100px 0 0 0;
-o-border-radius:100px 0 0 0;
-ms-border-radius:100px 0 0 0;
border:0px solid transparent;
border-top:100px solid #924;
}
/*右半个四分之一圆*/
.circle1-8{width:0px;height:100px;
border-radius:0 100px 0 0;
-webkit-border-radius:0 100px 0 0;
-moz-border-radius:0 100px 0 0;
border:0px solid transparent;
border-right:100px solid #578;
}
/*下半个四分之一圆*/
.circle1-9{width:0px;height:100px;
border-radius:0 0 0 100px;
-webkit-border-radius:0 0 0 100px;
-moz-border-radius:0 0 0 100px;
border:0px solid transparent;
border-left:100px solid #f81;
}
/*左半个四分之一圆*/
.circle1-10{width:100px;height:0px;
border-radius:0 0 100px 0;
-webkit-border-radius:0 0 100px 0;
-moz-border-radius:0 0 100px 0;
border:0px solid red;
border-bottom:100px solid #185;
}

 7.提示型的对话框

.hint1{width:180px;height:100px;border-radius:30px;background:purple;position:relative;}
.hint1:after{content: "";border: 0 solid transparent; 
border-bottom:25px solid purple;
-moz-border-radius:0 0 0 200px;
-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;
width:40px;height:40px;
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);
position:absolute;top:85px;}

.hint2{width:180px;height:120px;border-radius:180px/120px;background:#f12;position:relative;}
.hint2:after{content: "";border: 0 solid transparent; 
border-bottom:25px solid #f12;
-moz-border-radius:0 0 0 200px;
-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;
width:40px;height:40px;
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);
position:absolute;top:85px;left:5px;}

 8.各种胶囊型（不同的border-radius构成的椭圆）及由胶囊构成的爱心

.jiaonang1{width:250px;height:100px;background:#ec2;
border-radius:50px;}
.jiaonang2{width:100px;height:250px;background:#ec2;
border-radius:50px;}
.jiaonang3{width:100px;height:150px;background:#ec2;
border-radius:50px 50px 0 0px;}
.jiaonang4{width:100px;height:150px;background:#ec2;
border-radius:0 0 50px 50px;}

.heart{width:100px;height:150px;background:red;
border-radius:50px 50px 0 0;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
position:relative;
}
.heart:after{width:100px;height:150px;background:red;
border-radius:50px 50px 0 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
position:absolute;
content:"";
top:26px;
left:-25px;
}