一、前言

利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內容，沒有兼容性的問題，我之前在純CSS實現各類氣球泡泡對話框效果一文中算是比較詳細的講述了CSS border屬性生成三角的原理，以及實例。我覺得此技術相當實用的，故本文再次簡單敘述一下，另外，本文還將展示可能并不為眾人所知的CSS border圓角生成技術（網頁制作培訓）。好了，裹腳布的話就不說了，直接進入正題。
 
二、CSS border生成三角技術簡介
效果搶鮮
下圖為使用CSS的border屬性實現的三角效果：

.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
如何實現的，為何會有這樣的效果，不急，take it easy!
梯形圖案
看下面這段樣式：
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
當某個div應用了上面這個樣式后，結果會如何？見下圖（截自Firefox3.5，IE瀏覽器有細節(jié)上的差異）：

更進一步 – 部分邊框透明
現在，設想一下，如果我們現在只保留一個一個上邊框，其余邊框均transparent透明（或與背景色同色），那么是不是就只顯示一個上面紅色的邊框了，我們測試下，與上面類似的代碼，只是修改下其余三個邊框的顏色。
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
結果如下圖（截自Firefox3.5）：

得到的是一個梯形。
從梯形到三角
上面的是梯形，我要想得到一個三角圖案該怎么辦呢？顯然，很簡單，把div的高寬都變成0，只留一邊，不就是三角了嗎？如下代碼：
.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
結果如下（依舊截圖自Firefox3.5）：

從等腰直角三角形到普通等腰三角
上圖為等腰直角三角形，之所以為等腰直角，是因為所有的邊框寬度是一樣的，如果我們將邊框寬度設置為不同（計算機培訓），那會怎樣？則會形成等腰三角形。如下代碼：
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
得到的結果如下圖：