在線演示：http://demo.Vevb.com/js/2011/WarICONPrefect/index.htm
上面的效果看起來還不錯吧。在網頁里，除了用Flash，我們還是有不少方法可以實現它。
顯然這種效果不復雜，一張背景圖片，加上前面帶有透明度的多邊形圖層，在腳本控制下就可以轉起來了。但問題在于用什么方法來構建這個多邊形？
在IE下可以用VML，其他瀏覽器可以用Canvas等等。雖然行的通，但都不是最簡單的。仔細分析下，該效果本質就是若干個三角形拼接而成。而三角形，如果你熟悉CSS2的話，一定在哪個地方見過。。。
首先來看一個100*100尺寸的div，他有4條彩色的邊框：
當然，此時你看不出什么。現在我們把div的邊框寬度設置成50px：
你發現什么了？邊框與邊框之間的交界處正好是條斜線。現在我們把div的長寬都設置成0，并且試著改變每條邊的邊框寬度：
<style>
.demo3
{
width: 0px;
height: 0px;
overflow: hidden;
border-top: 20px red solid;
border-right: 30px green solid;
border-bottom: 40px blue solid;
border-left: 50px #000 solid;
}
</style>
<div class=”demo3″></div>
我們對其上右下左分別設置了20 30 40 50px的邊框寬度，這時就是呈現出一個不規則的三角形了。我們還可以通過設置邊框顏色為transparent，讓指定的邊框隱藏掉（只指定一個方向上單獨的邊框是不會顯示出來的，至少要指定兩個相連的方向才能顯示出來，所以要把不該出現的方向上的設置成透明）。例如：
<style>
.demo4
{
width: 0px;
height: 0px;
overflow: hidden;
border-left: 50px #000 solid;
border-top: 20px red solid;
border-right: 0px green solid;
border-bottom: 0px blue solid;;
}
</style>
<div class=”demo4″></div>
但是我們只需其中一種顏色，所以要把另個邊框的顏色設置成透明。值得注意的是，IE6下邊框顏色不支持transparent值，始終顯示為黑色，所以需要用個hack針對ie6，用chroma濾鏡過濾掉黑色。（這一點感謝CSDN上的網友X!ao_f的支持！）
新聞熱點
疑難解答
