如何使用CSS3实现11种基本图形

这篇文章主要介绍如何使用CSS3实现11种基本图形，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

古雷港ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

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;

}

以上是“如何使用CSS3实现11种基本图形”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！