如何使用CSS3实现11种基本图形
这篇文章主要介绍如何使用CSS3实现11种基本图形，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
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:1000%;-moz-transform-origin:1000%;-ms-transform-origin:1000%;-o-transform-origin:1000%;
transform-origin:1000%;
}
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;
}
以上是"如何使用CSS3实现11种基本图形"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
