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

來自： http://blog.csdn.net/iefreer/article/details/50718420

我們可以使用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