前幾天 w3cschool 小編為大家介紹了幾種常用的圖形畫法。那么今天我們又來(lái)介紹下 CSS 如何畫五角星？
五角星在網(wǎng)頁(yè)中的應(yīng)用還是很常見(jiàn)的，比如我們常見(jiàn)的收藏功能，通過(guò)繪制一個(gè)五角星，當(dāng)用戶輕點(diǎn)五角星即可點(diǎn)亮五角星，達(dá)到收藏效果。
我們先來(lái)看下實(shí)現(xiàn)效果：
思路：其實(shí)實(shí)現(xiàn)五角星的思路就是先繪制3個(gè)三角形，再將這三個(gè)三角形組合而成，就可以得到一個(gè)五角星了。
具體代碼：
<!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)角度為順時(shí)針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 圖形繪制請(qǐng)關(guān)注 w3cschool 官網(wǎng)。
更多相關(guān)文章：CSS如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字出現(xiàn)效果？、CSS如何實(shí)現(xiàn)照片模糊？
