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