這篇文章主要介紹如何使用CSS3實現(xiàn)11種基本圖形，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

古雷港ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：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實現(xiàn)11種基本圖形”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！