CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析.docx
- 文档编号:8486819
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:17
- 大小:75.11KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 实现 三角 五角星 五边形 爱心 12 角星 角星圆 椭圆 圆圈 八卦 剖析