本篇内容主要讲解“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; /*设置元素宽高为0*/ height: 0px; border-right: 100px solid transparent; /*设置右部分为透明*/ border-bottom: 70px solid #ff0000; /*设置底部为红色*/ border-left: 100px solid transparent; /*设置左部分为透明*/ /*旋转角度为顺时针35度*/ -moz-transform: rotate(35deg); /*Firefox*/ -webkit-transform: rotate(35deg); /*Safari 和 Chrome*/ -ms-transform: rotate(35deg); /*IE 9*/ -o-transform: rotate(35deg); /*Opera*/}#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如何画五角星”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
