如何使用CSS3實(shí)現(xiàn)11種基本圖形

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

　　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實(shí)現(xiàn)11種基本圖形”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！