CSS怎么画五角星？

<!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绘制五角星

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

具体代码：


0 0
讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！
帮助