5.15日音訊,網(wǎng)頁(yè)中border三角知識(shí)詳解。利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。一、前言

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

　　二、CSSborder生成三角技術(shù)簡(jiǎn)介

　　效果搶鮮

　　下圖為使用CSS的border屬性實(shí)現(xiàn)的三角效果：

　　復(fù)制代碼代碼如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ff3300#ffffff#ffffff;}

　　如何實(shí)現(xiàn)的，為何會(huì)有這樣的效果，不急，takeiteasy!

　　梯形圖案

　　看下面這段樣式：

　　復(fù)制代碼代碼如下:.test{width:10px;height:10px;border:10pxsolid;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è)邊框的顏色。

　　復(fù)制代碼代碼如下:.test{width:10px;height:10px;border:10pxsolid;border-color:#ff3300#ffffff#ffffff#ffffff;}

　　結(jié)果如下圖（截自Firefox3.5）：

　　得到的是一個(gè)梯形。

　　從梯形到三角

　　上面的是梯形，我要想得到一個(gè)三角圖案該怎么辦呢？顯然，很簡(jiǎn)單，把div的高寬都變成0，只留一邊，不就是三角了嗎？如下代碼：

　　復(fù)制代碼代碼如下:.test{width:0;height:0;border:10pxsolid;border-color:#ff3300#ffffff#ffffff#ffffff;}

　　結(jié)果如下（依舊截圖自Firefox3.5）：

　　從等腰直角三角形到普通等腰三角

　　上圖為等腰直角三角形，之所以為等腰直角，是因?yàn)樗械倪吙驅(qū)挾仁且粯拥模绻覀儗⑦吙驅(qū)挾仍O(shè)置為不同，那會(huì)怎樣？則會(huì)形成等腰三角形。如下代碼：

　　復(fù)制代碼代碼如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ffffff#ffffff#ffffff;}

　　得到的結(jié)果如下圖：

　　從等腰到不等腰

　　我們可以不局限于保留一條邊框，我們可以保留兩條，于是我們可以告別等腰，得到更加銳利的三角，正如一開(kāi)始所展示的那個(gè)三角：

　　復(fù)制代碼代碼如下:.test{width:0;height:0;border-width:20px10px;border-style:solid;border-color:#ff3300#ff3300#ffffff#ffffff;}