CSS怎么画五角星？

猿友 2021-03-26 16:47:44 浏览数 (6958)

前几天 w3cschool 小编为大家介绍了几种常用的图形画法。那么今天我们又来介绍下 CSS 如何画五角星？

五角星在网页中的应用还是很常见的，比如我们常见的收藏功能，通过绘制一个五角星，当用户轻点五角星即可点亮五角星，达到收藏效果。

我们先来看下实现效果：

CSS绘制五角星

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

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS绘制五角星 - 编程狮(w3cschool.cn)</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 图形绘制请关注 w3cschool 官网。

更多相关文章：CSS如何实现鼠标滑过文字出现效果？、CSS如何实现照片模糊？