巧用CSS邊框 製作技能冷卻效果

      上面的效果看起來還不錯吧。在網頁裡，除了用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的支援！）

<style>
.BG5
{
background: #CC9900;
}

.demo5
{
width: 0px;
height: 0px;
overflow: hidden;

filter: alpha(opacity=60);
_filter: Chroma(color='black') alpha(opacity=60);
opacity: 0.6;

border-left: 50px #000 solid;
border-top: 20px transparent solid;
border-right: 0px green solid;
border-bottom: 0px blue solid;;
}
</style>
<div class="BG5">
<div class="demo5"></div>
</div> 

       通過這個背景層，更好的看出其中一個邊框設定成透明了。

       如此一來，我們只需建立若干個div，通過設定其邊框來拼接成相應的多邊形。

     

       事實上我們可以利用邊框兩邊的三角形，這樣只需建立4個遮罩層。至於代碼如何寫，拿張草稿紙出來，在上面推算下就可以了。

原文：http://www.cnblogs.com/index-html/archive/2011/03/11/1981670.html