一、前言

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

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

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

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

從等腰直角三角形到普通等腰三角
上圖為等腰直角三角形，之所以為等腰直角，是因?yàn)樗械倪吙驅(qū)挾仁且粯拥?，如果我們將邊框?qū)挾仍O(shè)置為不同（計(jì)算機(jī)培訓(xùn)），那會(huì)怎樣？則會(huì)形成等腰三角形。如下代碼：
.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
得到的結(jié)果如下圖：