CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析.docx
《CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析.docx》由会员分享，可在线阅读，更多相关《CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析.docx（17页珍藏版）》请在冰豆网上搜索。
CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
1.长方形
#Rectangle{
width:
200px;
height:
50px;
background-color:
red;
color:
white;
text-align:
center;
}
2.正方形
#square{
width:
200px;
height:
200px;
background-color:
red;
color:
white;
text-align:
center;
}
3.实心圆
#perfect-circle{
width:
200px;
height:
200px;
background-color:
red;
color:
white;
text-align:
center;
border-radius:
100px;
/*-webkit-border-radius:
100px;*/
-moz-border-radius:
100px;
}
4.圈
#circle{
width:
200px;
height:
200px;
background-color:
white;
color:
black;
text-align:
center;
border-radius:
100px;
/*-webkit-border-radius:
10px;*/
/*-moz-border-radius:
100px;*/
border:
3pxredsolid;
}
5.椭圆
#ellipse{
width:
200px;
height:
100px;
background-color:
red;
color:
white;
text-align:
center;
border-radius:
100px/50px;
/*-webkit-border-radius:
100px/50px;*/
/*-moz-border-radius:
100px/50px;*/
}
6.上三角
#triangle-up{
width:
0px;
height:
0px;
color:
white;
text-align:
center;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
border-bottom:
100pxsolidred;
/*-webkit-border-top-left-radius:
50pxsolidtransparent;*/
/*-webkit-border-top-right-radius:
50pxsolidtransparent;*/
/*-webkit-border-bottom-left-radius:
100pxsolidred;*/
/*-webkit-border-bottom-right-radius:
100pxsolidred;*/
}
7.下三角
#triangle-down{
width:
0px;
height:
0px;
color:
white;
text-align:
center;
border-top:
100pxsolidred;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
}
8.左三角
#triangle-left{
width:
0px;
height:
0px;
color:
white;
text-align:
center;
border-top:
50pxsolidtransparent;
border-left:
100pxsolidred;
border-bottom:
50pxsolidtransparent;
}
9.右三角
#triangle-right{
width:
0px;
height:
0px;
color:
white;
text-align:
center;
border-top:
50pxsolidtransparent;
border-right:
100pxsolidred;
border-bottom:
50pxsolidtransparent;
}
10.顶左
#triangle-topleft{
width:
0px;
height:
0px;
border-top:
100pxsolidred;
border-right:
100pxsolidtransparent;
}
11.顶右
#triangle-topright{
width:
0px;
height:
0px;
border-top:
100solidred;
border-left:
100solidtransparent;
}
12.底左
#triangle-bottomleft{
width:
0px;
height:
0px;
border-bottom:
100pxsolidred;
border-right:
100pxsolidtransparent;
}
13.底右
#triangle-bottomright{
width:
0px;
height:
0px;
border-bottom:
100pxsolidred;
border-left:
100pxsolidtransparent;
}
14.平行四边形
#parallelogram{
width:
200px;
height:
150px;
margin-left:
30px;
-webkit-transform:
skew（-30deg）;
-moz-transform:
skew（200deg）;
-o-transform:
skew（200deg）;
background-color:
red;
}
15.
#trapezoid{
border-bottom:
100pxsolidred;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
width:
100px;
height:
0px;
}
16.#star-five{
width:
0;
height:
0;
color:
red;
margin:
50px0;
position:
relative;
display:
block;
border-left:
100pxsolidtransparent;
border-right:
100pxsolidtransparent;
border-bottom:
70pxsolidred;
-moz-transfrom:
rotate（35deg）;
-webkit-transform:
rotate（35deg）;
-ms-transform:
rotate（35deg）;
-o-transform:
rotate（35deg）;
}
#star-five:
before{
width:
0;
height:
0;
border-left:
30pxsolidtransparent;
border-right:
30pxsolidtransparent;
border-bottom:
80pxsolidred;
position:
absolute;
top:
-45px;
left:
-65px;
color:
white;
display:
block;
content:
"";
-moz-transform:
rotate（-35deg）;
-webkit-transform:
rotate（-35deg）;
-ms-transform:
rotate（-35deg）;
-o-transform:
rotate（-35deg）;
}
#star-five:
after{
width:
0;
height:
0;
display:
block;
position:
absolute;
color:
red;
top:
3px;
left:
-105px;
border-left:
100pxsolidtransparent;
border-right:
100pxsolidtransparent;
border-bottom:
70pxsolidred;
content:
"";
-moz-transform:
rotate（-70deg）;
-webkit-transform:
rotate（-70deg）;
-ms-transform:
rotate（-70deg）;
-o-transform:
rotate（-70deg）;
}
17.#star-six{
width:
0;
height:
0;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
border-bottom:
100pxsolidred;
position:
relative;
}
#star-six:
after{
width:
0;
height:
0;
border-top:
100pxsolidred;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
position:
absolute;
content:
"";
top:
30px;
left:
-50px;
}
18.#pentagon{
width:
54px;
position:
relative;
border-width:
50px18px0;
border-style:
solid;
border-color:
redtransparent;
}
#pentagon:
before{
content:
"";
position:
absolute;
width:
0;
height:
0;
top:
-85px;
left:
-18px;
border-width:
045px35px;
border-style:
solid;
border-color:
transparenttransparentred;
}
19.#hexagon{
width:
100px;
height:
55px;
background-color:
red;
position:
relative;
}
#hexagon:
before{
content:
"";
position:
absolute;
top:
-25px;
left:
0;
width:
0;
height:
;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
border-bottom:
25pxsolidred;
}
#hexagon:
after{
content:
"";
left:
0;
width:
0;
height:
0;
bottom:
-25px;
position:
absolute;
border-left:
50pxsolidtransparent;
border-right:
50pxsolidtransparent;
border-top:
25pxsolidred;
}
20.#octagon{
width:
100px;
height:
100px;
background-color:
red;
position:
relative;
}
#octagon:
before{
width:
42px;
height:
0;
top:
0;
left:
0;
position:
absolute;
content:
"";
border-left:
29pxsolid#eee;
border-right:
29pxsolid#eee;
border-bottom:
29pxsolidred;
}
#octagon:
after{
width:
42px;
height:
0;
left:
0;
bottom:
0;
position:
absolute;
content:
"";
border-left:
29pxsolid#eee;
border-right:
29pxsolid#eee;
border-top:
29pxsolidred;
}
21#heart{
width:
100px;
height:
90px;
position:
relative;
}
#heart:
before,#heart:
after{
width:
50px;
height:
80px;
left:
50px;
top:
0;
background-color:
red;
position:
absolute;
content:
"";
-moz-border-radius:
50px50px00;
border-radius:
50px50px00;
-webkit-transform:
rotate（-45deg）;
-ms-transform:
rotate（-45deg）;
-moz-transform:
rotate（-45deg）;
-o-transform:
rotate（-45deg）;
transform:
rotate（-45deg）;
-webkit-transform-origin:
0100%;
-ms-transform-origin:
0100%;
-moz-transform-origin:
0100%;
-o-transform-origin:
0100%;
tansform-origin:
0100%;
}
#heart:
after{
left:
0;
-webkit-transform:
rotate（45deg）;
-ms-transform:
rotate（45deg）;
-moz-transform:
rotate（45deg）;
-o-transform:
rotate（45deg）;
transform:
rotate（45deg）;
-webkit-transform-origin:
100%100%;
-ms-transform-origin:
100%100%;
-moz-transform-origin:
100%100%;
-o-transform-origin:
100%100%;
transform-origin:
100%100%;
}
22.#infinity{
width:
212px;
height:
100px;
position:
relative;
}
#infinity:
before,#infinity:
after{
width:
60px;
height:
60px;
top:
0;
left:
0;
border:
20pxsolidred;
position:
absolute;
content:
"";
border-radius:
50px50px050px;
-webkit-border-radius:
50px50px050px;
-moz-border-radius:
50px50px050px;
transform:
rotate（-45deg）;
-webkit-transform:
rotate（-45deg）;
-ms-transform:
rotate（-45deg）;
-moz-transform:
rotate（-45deg）;
-o-transform:
rotate（-45deg）;
}
#infinity:
after{
left:
auto;
right:
0;
border-radius:
50px50px50px0;
-webkit-border-radius:
50px50px50px0;
-moz-border-radius:
50px50px50px0;
transform:
rotate（45deg）;
-webkit-transform:
rotate（45deg）;
-moz-transform:
rotate（45deg）;
-ms-transform:
rotate（45deg）;
-o-transform:
rotate（45deg）;
}
23.#egg{
width:
126px;
height:
180px;
background-color:
red;
display:
block;
border-radius:
50%50%50%50%/60%60%40%40%;
/*-webkit-border-radius:
50%50%50%50%/60%60%40%40%;*/
}
24.#pacman{
width:
0;
height:
0;
border-right:
60pxsolidtransparent;
border-left:
60pxsolidred;
border-top:
60pxsolidred;
border-bottom:
60pxsolidred;
border-top-left-radius:
60px;
border-top-right-radius:
60px;
border-bottom-left-radius:
60px;
border-bottom-right-radius:
60px;
}
25.#talkbubble{
width:
200px;
height:
100px;
background-color:
red;
position:
relative;
border-radius:
10px;
-webkit-border-radius:
10px;
-moz-border-radius:
10px;
-ms-border-radius:
10px;
-o-border-radius:
10px;
}
#talkbubble:
before{
width:
0;
height:
0;
right:
100%;
top:
30px;
position:
absolute;
content:
"";
border-top:
15pxsolidtransparent;
border-right:
30pxsolidred;
border-bottom:
15pxsolidtransparent;
}
26.#burst-12{
width:
80px;
height:
80px;
background-color:
red;
position:
relative;
text-align:
center;
}
#burst-12:
before,#burst-12:
after{
width:
80px;
height:
80px;
top:
0;
left:
0;
background-color:
red;
position:
absolute;
content:
"";
}
#burst-12:
before{
transform:
rotate（30deg）;
-webkit-transform:
rotate（30deg）;
-ms-transform:
rotate（30deg）;
-moz-transform:
rotate（30deg）;
-o-transform:
rotate（30deg）;
}
#burst-12:
after{
transform:
rotate（60deg）;
-webkit-transform:
rotate（60deg）;
-ms-transform:
rotate（60deg）;
-moz-transform:
rotate（60deg）;
-o-transform:
rotate（60deg）;
}
27.#burst-8{
width:
80px;
height:
80px;
background-color:
red;
text-align:
center;
position:
relative;
transform:
rotate（20deg）;
-webkit-transform:
rotate（20deg）;
-ms-transform:
rotate（20deg）;
-moz-transform:
rotate（20deg）;
-o-transform:
rotate（20deg）;
}
#burst-8:
before{
width:
80px;
height:
80px;
top:
0;
left:
0;
background-color:
red;
position:
absolute;
content:
"";
transform:
rotate（135deg）;
-webkit-transform:
rotate（135deg）;
-ms-transform:
rotate（135deg）;
-moz-transform:
rotate（135deg）;
-o-transform:
rotate（135deg）;
}
29.#diamond{
width:
50px;
height:
0;
border-style:
solid;
border-color:
transparenttransparentredtransparent;
border-width:
025px25px25px;
position:
relative;
margin:
20px050px0;
}
#diamond:
after{
width:
0;
height:
0;
top:
25px;
left:
-25px;
border-style:
solid;
border-color:
redtransparenttransparenttransparent;
border-width:
70px50px050px;
position:
absolute;
content:
"";
}
30.#yin-yang{
wi
升级会员 