隨著css3.0的出現，我們可以畫出越來越多比較新穎的圖形，這裡我介紹一下用css3畫出三角形。
首先我們給個div
<div id="triangle"></div>
下面就是我們的css程式碼，
先看個例子

#triangle{
    width:100px;
    height:100px;
}

結果如下：

很簡單，然後呢，我們加上邊框

#triangle{
    width: 100px;
    height: 100px;
    border-left: 50px solid red;
    border-right: 50px solid yellow
 
;
    border-top: 50px solid gold;
    border-bottom: 50px solid purple;
}

結果如下

好像有奇蹟了，如果我把div的寬高都設定為0，影象是否就會顯示成四個三角形構成一個正方形，試一下

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-right: 50px solid yellow;
    border-top: 50px solid gold;
    border-bottom: 50px solid purple
 
;
}

見證奇蹟的時刻：

不過現在有了四個三角形，如果我們只要一個三角形的話怎麼辦？試著減一個邊框看看

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-right: 50px solid yellow;
    border-bottom: 50px solid purple;
}

少了一個三角形，那麼如果我取消另外兩個邊框會怎麼樣？

#triangle{
    width: 0px;
    height: 0px;
    border-bottom
 
: 50px solid purple;
}

咦！怎麼什麼都沒有，看來所有兩個邊界屬性都刪除是不行的，那如果我把它們隱藏呢：

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid purple;
}

上三角形就出現了，我們還可以寫出其他三個方向的三角形

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid purple;
}

下三角形

#triangle{
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

右三角形

#triangle{
    width: 0px;
    height: 0px;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

左三角形