CSS3實現三角形

很多時候我們用到三角形這個效果：

　　我們可以用CSS3實現這個效果，怎去做呢？先闡述一下原理，我們定義一個空的div，設置這個div寬高為0，給這個div加上一個100px邊框（這里是方便觀察），得到的是一個正方形，顏色和定義邊框的顏色相同，我們看到正方形其實是這個div邊框。

<div id="d1"></div>

style：
    #d1{
        width:0; 
        height:0; 
        border:100px solid red;
    }

實現效果：

那么這個元素現在對應的每個邊框是什么樣子的呢？我們來看：

對應代碼：

<div id="d1"></div>


style：
    #d1{
        width:0; 
        height:0;
        border-width:50px;
        border-style:solid;
        border-color:red blue black yellow;
　　　　　　　　　　　　 上　　右　　　下　　　左

}

從上面這個我們發現，其實這個寬高為0的div的每一條邊框都是一個三角形，實際操作中我們可能只需要一個三角形，那我們只要把不需要的border隱藏就可以了（用transparent屬性）：

比如我要一個向下的三角形：

對應代碼：

<div id="d1"></div>

style：
    #d1{
        width:0; 
        height:0;
        border-width:50px;
        border-style:solid;
        border-color:red transparent transparent transparent;
　　　　　　　　　　　　　上　　　右　　　　　　下　　　　　　左
    }

由此可以看出只是把對應border隱藏掉了，對應的border—color順序為：

border-color:上  右  下  左;　每個顏色之間用空格隔開。

一個45度三角形：

對應代碼：

<div id="d1"></div>

style：
    #d1{
        width:0; 
        height:0;
        border-width:50px;
        border-style:solid;
        border-color:transparent transparent red red ;
　　　　 border-color:transparent transparent red blue ;

}

同時我們可以調整對應border的寬度來調整三角形的形狀：

　　

對應代碼：

　　我們這里修改了下方border的寬度

<div id="d1"></div>
style：
    #d1{
        width:0; 
        height:0;
        border-width:50px;
        border-bottom-width:150px;
        border-style:solid;
        border-color:transparent transparent red transparent; border-color:blue green red black;
    }      

同時我們也可以繪制一個圓角三角形：

對應代碼：

這里為了看起來舒服些，加了透明度屬性；

<div id="d1"></div>
style：
        #d1{
        width:0; 
        height:0;
        border-width:50px;
        border-style:solid;
 border-top-left-radius: 15px; opacity: 0.569;
        border-color:red transparent transparent red;
    }

關於三角形的制作基本就這些，很多時候配合偽類before、after使用會有意想不到的效果：

比如這個我自己編寫的登錄窗口的標簽：