這篇文章主要介紹如何使用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: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種基本圖形”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
