如何使用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:50pxsolidtr免费云主机、域名ansparent;
　　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种基本图形”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注云技术行业资讯频道！

相关推荐: Css3中如何实现hover动画的颜色动画效果

这篇文章主要为大家展示了“Css3中如何实现hover动画的颜色动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css3中如何实现hover动画的颜色动画效果”这篇文章吧。颜色动画效果主要是利用:before…