前几天 zijiebao 小编为大家介绍了几种常用的图形画法。那么今天我们又来介绍下 CSS 如何画五角星？
五角星在网页中的应用还是很常见的，比如我们常见的收藏功能，通过绘制一个五角星，当用户轻点五角星即可点亮五角星，达到收藏效果。
我们先来看下实现效果：
思路：其实实现五角星的思路就是先绘制3个三角形，再将这三个三角形组合而成，就可以得到一个五角星了。
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS绘制五角星 - 字节宝(zijiebao.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 怎么画五角星的全部解答。更多 CSS 图形绘制请关注 zijiebao 官网。
更多相关文章：CSS如何实现鼠标滑过文字出现效果？、CSS如何实现照片模糊？
