本篇内容主要讲解“CSS如何画五角星”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS如何画五角星”吧!

思路：其实实现五角星的思路就是先绘制3个三角形，再将这三个三角形组合而成，就可以得到一个五角星了。

具体代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS绘制五角星-亿速云(yisu.com)</title><styletype="text/css">#star-five{margin:100px0;position:relative;display:block;color:red;width:0px;/*设置元素宽高为0*/height:0px;border-right:100pxsolidtransparent;/*设置右部分为透明*/border-bottom:70pxsolid#ff0000;/*设置底部为红色*/border-left:100pxsolidtransparent;/*设置左部分为透明*//*旋转角度为顺时针35度*/-moz-transform:rotate(35deg);/*Firefox*/-webkit-transform:rotate(35deg);/*Safari和Chrome*/-ms-transform:rotate(35deg);/*IE9*/-o-transform:rotate(35deg);/*Opera*/}#star-five:before{border-bottom:80pxsolid#ff0000;border-left:30pxsolidtransparent;border-right:30pxsolidtransparent;position:absolute;height:0;width:0;top:-45px;left:-65px;display:block;content:'';-webkit-transform:rotate(-35deg);-moz-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}#star-five:after{position:absolute;display:block;color:red;top:3px;left:-105px;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70pxsolid#ff0000;border-left:100pxsolidtransparent;-webkit-transform:rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);content:'';}</style></head><body><divid="star-five"></div></body></html>

到此，相信大家对“CSS如何画五角星”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！