如何使用純CSS3創建一個簡單的五角星圖形

我們可以使用SVG、Canvas、CSS3或者背景圖片來實現五角星圖案及其懸停效果。
CSS3引入的偽元素和變換特性使得實現五角星圖形非常簡單，並且可以結合漸變實現更為漂亮的效果。
因此使用圖片實現五角星已經毫無必要（圖片占用額外的請求，且數據量大。除非要支持低版本的桌面IE瀏覽器）。
首先我們創建一個三角形，這通常是使用帶大尺寸邊線而零內容尺寸的元素來實現，代碼示範：

.tri {
 width: 0;
 height: 0;
 border-left: 15px solid transparent;




 border-right: 15px solid transparent;
 border-bottom: 30px solid red;
}

第二步，我們使用偽元素:after和:before來克隆2個同樣大小的三角形。

.tri:after,.tri:before {
 width: 0;
 height: 0;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
 border-bottom: 30px solid red;
}

然後，我們在上述2個偽元素上分別應用不同的旋轉變換：

.tri:before {




 transform: rotate(70deg);
}
.tri:after {
 transform: rotate(-70deg);
}

這樣我們就實現了一個五角星圖形（圖標）。我們可以用類似的方法實現更多的幾何形狀。
你可以通過在線實例自己試試看：http://wow.techbrood.com/fiddle/10258
你還可以先思考下如何實現帶邊線和漸變效果的三角形，再參考下這個實現：http://wow.techbrood.com/fiddle/16978
by iefreer