CSS3实现的11种基本图形代码
导读： CSS3圆角 #css3-circle{ width:150px; height:150px; border-radius:50%; } CSS3椭圆形css3radius #css3-elip...
CSS3圆角
#css3-circle{
width:150px;
height:150px;
border-radius:50%;
}
CSS3椭圆形css3radius
#css3-elipse{
width:200px;
height:100px;
border-radius:50%;
}
CSS3三角形
#css3-triangle{
width:0;
height:0;
border-left:100pxsolidtransparent;
border-right:100pxsolidtransparent;
border-bottom:150pxsolid#232323;
}
CSS3平行四边形
#css3-parallelogram{
width:200px;
height:100px;
background:#232323;
-webkit-transform:skew(-45deg);
-moz-transform:skew(-45deg);
-o-transform:skew(-45deg);
transform:skew(-45deg);
}
CSS3梯形
#css3-trapezoid{
width:100px;
height:0;
border-bottom:100pxsolid#232323;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
}
CSS3六角星
#css3-six-star{
width:0;
height:0;
position:relative;
border-bottom:100pxsolid#232323;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
}
#css3-six-star:after{
content:"";
width:0;
height:0;
position:absolute;
left:-50px;
top:35px;
border-top:100pxsolid#232323;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
}
CSS3五角星css3transform
#css3-five-star{
width:0px;
height:0px;
margin:50px0;
position:relative;
display:block;
color:#232323;
border-right:100pxsolidtransparent;
border-bottom:70pxsolid#232323;
border-left:100pxsolidtransparent;
-moz-transform:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
}
#css3-five-star:before{
border-bottom:80pxsolid#232323;
;
border-left:30pxsolidtransparent;
border-right:30pxsolidtransparent;
position:absolute;
height:0;
width:0;
top:-45px;
left:-63px;
display:block;
content:'';
-webkit-transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
}
#css3-five-star:after{
position:absolute;
display:block;
color:#232323;
top:3px;
left:-105px;
width:0px;
height:0px;
border-right:100pxsolidtransparent;
border-bottom:70pxsolid#232323;
border-left:100pxsolidtransparent;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
content:'';
}
CSS3五边形
#css3-pentagon{
position:relative;
width:54px;
border-width:50px18px0;
border-style:solid;
border-color:#232323transparent;
}
#css3-pentagon:before{
content:"";
position:absolute;
height:0;
width:0;
top:-85px;
left:-18px;
border-width:045px35px;
border-style:solid;
border-color:transparenttransparent#232323;
}
CSS3六边形
#css3-hexagon{
width:100px;
height:55px;
background:#232323;
position:relative;
}
#css3-hexagon:before{
content:"";
position:absolute;
top:-25px;
left:0;
width:0;
height:0;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
border-bottom:25pxsolid#232323;
}
#css3-hexagon:after{
content:"";
position:absolute;
bottom:-25px;
left:0;
width:0;
height:0;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
border-top:25pxsolid#232323;
}
CSS3心形
#css3-heart{
position:relative;
width:100px;
height:90px;
}
#css3-heart:before,#css3-heart:after{
position:absolute;
content:"";
left:50px;
top:0;
width:50px;
height:80px;
background:#232323;
-moz-border-radius:50px50px00;
border-radius:50px50px00;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0100%;
-moz-transform-origin:0100%;
-ms-transform-origin:0100%;
-o-transform-origin:0100%;
transform-origin:0100%;
}
#css3-heart:after{
left:0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100%100%;
-moz-transform-origin:100%100%;
-ms-transform-origin:100%100%;
-o-transform-origin:100%100%;
transform-origin:100%100%;
}
CSS3八卦
#css3-gossip{
width:96px;
height:48px;
background:#f1f1f1;
border-color:#232323;
border-style:solid;
border-width:2px2px50px2px;
border-radius:100%;
position:relative;
}
#css3-gossip:before{
content:"";
position:absolute;
top:50%;
left:0;
background:#f1f1f1;
border:18pxsolid#232323;
border-radius:100%;
width:12px;
height:12px;
}
#css3-gossip:after{
content:"";
position:absolute;
top:50%;
left:50%;
background:#232323;
border:18pxsolid#f1f1f1;
border-radius:100%;
width:12px;
height:12px;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS3实现的11种基本图形代码
本文地址： https://pptw.com/jishu/664735.html