前几天 w3cschool 小编为大家介绍了几种常用的图形画法。那么今天我们又来介绍下 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如何实现照片模糊?