最終想要實現的效果
一、五角星
在畫五角星之前首先分析這個五角星是如何實現，由哪幾個部分構成的，示意圖如下：
三個頂角向上的三角形，通過設置旋轉和定位相互重疊和拼接實現最終的五角星效果。
為了語義化和代碼更加簡便，所以使用偽類來添加內容。
1、設置一個等腰三角形，並使用transform將其旋轉到合適的角度 transform: rotate(35deg);
.star{ width:0px;height:0px; border-bottom:70px solid rgba(244,0,0,0.4); border-left:100px solid transparent; border-right:100px solid transparent; margin:100px auto;
/*到這一步為止，得到的是一個向上的等腰三角形*/ -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg);
/*順時針旋轉35deg*/ position:relative;
}
2、使用：before偽元素在div元素前面添加內容。
偽類所添加的內容繼承 div的樣式也發生了順時針旋轉，所以如果消除順時針旋轉的影響，可以 transform: rotate(-35deg);
設置定位，將內容調整到合適的位置 top:-45px; left:-65px;
.star:before{ content:""; width:0px; height:0px; border-bottom:80px solid rgba(0,244,0,0.5); border-left:30px solid transparent; border-right:30px solid transparent;
/*偽類所添加的內容繼承原來的樣式也發生了順時針旋轉*/ -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg);
/*設置負值，就會逆時針旋轉*/ position:absolute; top:-45px;left:-65px;
/*定位調整位置*/
}
3、使用 :after 偽類在div 元素后面添加內容
將內容旋轉到合適的角度 transform: rotate(-35deg);
設置定位，放置在適當的位置 top:3px;left:105px;
.star:after{ content:""; width:0px; height:0px; position:absolute; border-bottom:70px solid rgba(0,0,244,0.5); border-left:100px solid transparent; border-right:100px solid transparent; -webkit-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); top:3px;left:-105px;
}
實現效果和代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform</title> <style> .star{ width:0px;height:0px; border-bottom:70px solid red;
/*rgba(244,0,0,0.4);*/ border-left:100px solid transparent; border-right:100px solid transparent; margin:100px auto;
/*到這一步為止，得到的是一個向上的等腰三角形*/ -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg);
/*順時針旋轉35deg*/ position:relative;
} .star:before{ content:""; width:0px; height:0px; border-bottom:80px solid red;
/*rgba(0,244,0,0.5);*/ border-left:30px solid transparent; border-right:30px solid transparent;
/*偽類所添加的內容繼承原來的樣式也發生了順時針旋轉*/ -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg);
/*設置負值，就會逆時針旋轉*/ position:absolute; top:-45px; left:-65px;
/*定位調整位置*/
} .star:after{ content:""; width:0px; height:0px; position:absolute; border-bottom:70px solid red;
/*rgba(0,0,244,0.5);*/ border-left:100px solid transparent; border-right:100px solid transparent; -webkit-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); top:3px;left:-105px;
} </style> </head> <body> <div class="star"></div> </body> </html>
二、六角星
相比於五角星，六角星就簡單的多了，來是先來分析它是如何構成的：
兩個三角形交疊實現
注意兩個三角形之間的位置關系，設置正確的定位。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> #star{ width:0px;height:0px; border-bottom:100px solid red;
/*rgba(244,244,0,0.4);*/ border-left:50px solid transparent; border-right:50px solid transparent; margin:50px auto; position:relative;
} #star:after{ content:" "; width:0px;height:0px; border-top:100px solid red;
/*rgba(0,244,250,0.6);*/ border-left:50px solid transparent; border-right:50px solid transparent; position:absolute; top:50px;left:-50px;
}
</style>
</head>
<body>
<div id="star"></div>
</body>
</html>
