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使用會有意想不到的效果：

好比這個我本身編寫的登陸窗口的標籤：