这篇文章主要讲解了“怎么用CSS3画圆形、椭圆形、三角形”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS3画圆形、椭圆形、三角形”吧！

10余年专注成都网站制作，成都企业网站定制，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都企业网站定制,高端网页制作,对生料搅拌车等多个方面，拥有丰富的网站维护经验。

CSS3 圆形

#css3-circle{

 width: 150px;

 height: 150px;

 border-radius: 50%;

 background-color: #232323;}

CSS3 椭圆形

#css3-elipse{

 width: 200px;

 height: 100px;

 border-radius: 50%;

 background-color: #232323;}

CSS3 三角形

#css3-triangle{

 width: 0;

 height: 0;

 border-left: 100px solid transparent;

 border-right: 100px solid transparent;

 border-bottom: 150px solid #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: 100px solid #232323;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

}

CSS3 六角星

#css3-six-star{

 width: 0;

 height: 0;

 position: relative;

 border-bottom: 100px solid #232323;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

}#css3-six-star:after{

 content: "";

 width: 0;

 height: 0;

 position: absolute;

 left: -50px;

 top: 35px;

 border-top: 100px solid #232323;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

}

CSS3 五角星

#css3-five-star{

 width: 0px;

 height: 0px;

 margin: 50px 0;

 position: relative;

 display: block;

 color: #232323;

 border-right: 100px solid transparent;

 border-bottom: 70px  solid #232323;

 border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);

}#css3-five-star:before{

 border-bottom: 80px solid #232323;;

 border-left: 30px solid transparent;

 border-right: 30px solid transparent;

 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: 100px solid transparent;

 border-bottom: 70px solid #232323;

 border-left: 100px solid transparent; -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: 50px 18px 0;

 border-style: solid;

 border-color: #232323 transparent;}#css3-pentagon:before {

 content: "";

 position: absolute;

 height: 0;

 width: 0;

 top: -85px;

 left: -18px;

 border-width: 0 45px 35px;

 border-style: solid;

 border-color: transparent transparent #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: 50px solid transparent;

 border-right: 50px solid transparent;

 border-bottom: 25px solid #232323; }#css3-hexagon:after {

 content: "";

 position: absolute;

 bottom: -25px;

 left: 0;

 width: 0;

 height: 0;

 border-left: 50px solid transparent;

 border-right: 50px solid transparent;

 border-top: 25px solid #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: 50px 50px 0 0;

 border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);

 transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%;

 transform-origin: 0 100%;

}#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: 2px 2px 50px 2px;

 border-radius: 100%;

 position: relative;

}#css3-gossip:before{

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  background: #f1f1f1;

  border: 18px solid #232323;

  border-radius: 100%;

  width: 12px;

  height: 12px;

}#css3-gossip:after {

 content: "";

 position: absolute;

 top: 50%;

 left: 50%;

 background: #232323;

 border: 18px solid #f1f1f1;

 border-radius:100%;

 width: 12px;

 height: 12px;

}

感谢各位的阅读，以上就是“怎么用CSS3画圆形、椭圆形、三角形”的内容了，经过本文的学习后，相信大家对怎么用CSS3画圆形、椭圆形、三角形这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章名称：怎么用CSS3画圆形、椭圆形、三角形
网页网址：http://kswjz.com/article/jphgoj.html