原理

css盒模型

一個盒子包括: margin+border+padding+content

– 上下左右邊框交界處出呈現平滑的斜線. 利用這個特點, 通過設置不同的上下左右邊框寬度或者顏色可以得到小三角, 小梯形等.

– 調整寬度大小可以調節三角形形狀.

示例1

一般情況下, 我們設置盒子的寬高度, 及上下左右邊框, 會呈現如下圖

#test1 {    height:20px;    width:20px;    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;    border-style:solid;    border-width:20px;}

示例2

在上面基礎上, 我們把寬高度都設為0時, 會呈現上述的邊界斜線.

#test2 {    height:0;    width:0;    overflow: hidden; /* 這里設置overflow, font-size, line-height */    font-size: 0;     /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */    line-height: 0;  /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;    border-style:solid;    border-width:20px;}

這時, 其實我們已經看到有上下左右四個三角形了..如果, 我們把4種顏色, 只保留一種顏色, 余下3種顏色設置為透明(或者設置為和背景色相同的顏色), 那不就出現一個小三角了么

示例3

只保留上面的橙色, 看看

#test3 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 transparent transparent transparent;    border-style:solid;    border-width:20px;}

可是, IE6下不支持透明啊~~~, 會出現下圖的樣子

找到一個在IE6下邊框透明的文章中找到解決辦法, 如下例

示例4

IE6下, 設置余下三條邊的border-style為dashed,,,即可達到透明的效果~ 具體原因可以見參考資料3

#test4 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 transparent transparent transparent;    border-style:solid dashed dashed dashed;    border-width:20px;}

當然, 在IE6下, 不設置透明, 將其顏色設置為背景色, 使其看不出來也是可以的.

示例5

上面我們畫的小三角的斜邊都是依靠原來盒子的邊, 還有另外一種形式的小三角, 就是斜邊在盒子的對角線上

#test5 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 #3366ff transparent transparent;    border-style:solid solid dashed dashed;    border-width:40px 40px 0 0 ;}

保留其中一種顏色, 就可以得到斜邊在對角線上的三角形了…多個這樣的三角形, 通過設置邊框大小, 顏色, 拼湊起來可以形成任意形狀的三角形.

像這種不規則的三角形, 延伸一下, 放在氣泡框上, 就可以省去拼背景圖片的麻煩了.

另外, 關于氣泡框, 可以使用棱形字符(◆)來實現, 設置其font-size, 顏色和背景色一致, 定位可以使用margin負值和absolute絕對定位來實現, 見示例.

應用之圓角生成

應該說是近似圓角,,其實由一個高度非常小的梯形展示出來

- 上梯形(無上邊框,下左右3px寬度, 左右顏色去掉)+矩形+下梯形

自適應圓角1:

- 整個rc設置為float: left 或 display: inline-block 分為top,bd,bottom, top中又有兩個層rc1和rc2, rc1只設置border-top, 高度為0, 并設置左右margin呈短小的一橫線, rc2只設置左右border并且左右margin小于rc1, height為1px, 中間bd設置左右border,不設置左右margin;

- 不過 IE 6&7 出現 bug：rc在IE6中依然顯示為dispaly:block,而IE7中top 和 bottom縮成一坨,不肯擴展開來,而在rc1/rc2/rc3 中插入文字xxx后只能擴展到文字寬度,不能與bd對齊.

- 見自適應圓角1

自適應圓角2

- 自 Google 系產品的 1px 圓角按鈕,,,三層div, 最外層div1正常設置邊框寬度1px, 呈現出上下邊框線, 中間div2只設置左右邊框, 且把左右margin設置成負值, 呈現出圓角處的4個圓點 內層div3同樣只設置左右邊框, 同時margin上下空出div2的高度, margin左右也設置與div2相同的負值.

- 見自適應圓角2

其他小問題

- 透明:

IE6瀏覽器不支持transparent透明屬性,就border生成三角技術而言,直接設置對應的透明邊框的border-style屬性為dotted或是dashed即可解決這一問題,原因是在IE6下, 點線與虛線均以邊框寬度為基準,點線長度必須是其寬度的3倍以上（height>=border-width*3）,虛線寬長度必須是其寬度的5倍以上（height>=border-width*5）,否則點線和虛線都不會出現.

- IE6的奇偶bug:

如果定位外框高度或是寬度為奇數,則IE6下,絕對定位元素的低定位和右定位會有1像素的誤差.所以,盡量保證外框的高度或寬度為偶數值.

- IE6的空div高度bug:

IE6下,空div會有莫名的高度,也就是說height:0;不頂用,此時形成的尖角的實際占高于其他瀏覽器是有差異的.可使用font-size:0; + overflow:hidden;修復此問題.

- filter: chroma濾鏡

該屬性屬性可以設置一個對象中指定的顏色為透明色, 如:

border-color: pink;filter: chroma(color=pink);