标签：
基本设置：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;
}
标签：
原文地址：http://www.cnblogs.com/shixiaomiao/p/4331141.html
