http://caibaojian.com/css-border-triangle.html

原理

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對齊.

自適應圓角2

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

其他小問題

- 透明:

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);

擴充套件學習（酷劍原創）

通過上面給力的文章，我們瞭解到使用css製作相容的小三角。
但是日常的小三角哪有這麼簡單呢？例如我們的一個下拉選單，裡面有一個小三角行的，小三角行有藍色邊框，底色為白色。這就需要運用兩個小三角來製作定位了。

通常設定上面的ul相對於上面的li為position:absolute;

這兩個的小三角行則是通過偽元素來製作，同時通過一些標籤來相容IE6和IE7的。如：

.header .menu ul:before,.header .menu ul .before {
display:inline-block;
width:0;
height:0;
overflow:hidden;
line-height:0;
font-size:0;
vertical-align:middle;
border-bottom:7px solid #0088CC;
border-top:0 none;
border-left:7px dashed transparent;
border-right:7px dashed transparent;
_color:#FF3FFF;
_filter:chroma(color=#FF3FFF);
content:"";
left:37px;
position:absolute;
top:-7px
}
.header .menu ul:after,.header .menu ul .after {
display:inline-block;
width:0;
height:0;
overflow:hidden;
line-height:0;
font-size:0;
vertical-align:middle;
border-bottom:6px solid #ffffff;
border-top:0 none;
border-left:6px dashed transparent;
border-right:6px dashed transparent;
_color:#FF3FFF;
_filter:chroma(color=#FF3FFF);
content:"";
left:38px;
position:absolute;
top:-6px
}

同時我還發現了一個bug，那就是在IE6下面當隱藏UL，然後滑鼠經過LI時顯示時小三角不顯示了，不知道是什麼原因，我通過給UL直接設定為visibility:hidden而不是display:none，如果你也遇到同樣的情況，希望這個發現能夠對你有用，如果你無視IE6、IE7，那麼就直接用偽元素吧。什麼hack都不用。