本篇内容主要讲解“CSS如何画五角星”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS如何画五角星”吧!
思路：其实实现五角星的思路就是先绘制3个三角形，再将这三个三角形组合而成，就可以得到一个五角星了。
具体代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS绘制五角星 - 编程网(yisu.com)</title><style type="text/css">#star-five { margin: 100px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #ff0000; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);}#star-five:before { border-bottom: 80px solid #ff0000; border-left: 30px solid transparent; border-right: 30px solid transparent; 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: 100px solid transparent; border-bottom: 70px solid #ff0000; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';}</style></head><body><div id="star-five"></div></body></html>到此，相信大家对“CSS如何画五角星”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
