CSS怎么畫五角星？

猿友 2021-03-26 16:47:44 瀏覽數(shù) (7196)

反饋

前幾天 w3cschool 小編為大家介紹了幾種常用的圖形畫法。那么今天我們又來介紹下 CSS 如何畫五角星？

五角星在網(wǎng)頁中的應(yīng)用還是很常見的，比如我們常見的收藏功能，通過繪制一個五角星，當(dāng)用戶輕點(diǎn)五角星即可點(diǎn)亮五角星，達(dá)到收藏效果。

我們先來看下實(shí)現(xiàn)效果：

CSS繪制五角星

思路：其實(shí)實(shí)現(xiàn)五角星的思路就是先繪制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;	/*設(shè)置元素寬高為0*/
   height: 0px;
   border-right:  100px solid transparent;	/*設(shè)置右部分為透明*/
   border-bottom: 70px  solid #ff0000;			/*設(shè)置底部為紅色*/
   border-left:   100px solid transparent;	/*設(shè)置左部分為透明*/
	 /*旋轉(zhuǎn)角度為順時針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 圖形繪制請關(guān)注 w3cschool 官網(wǎng)。

HTML

0 人點(diǎn)贊