詳解使用CSS氣泡框實現方法

氣泡框（或者提示框）是網頁中一種很常見的元素，大多用來展示提示資訊，如所示：

拆分來看，形如這種氣泡框無外乎就是一個矩形框+一個指示方向的三角形小箭頭，要製作出這樣的氣泡框，如果解決了三角形小箭頭就容易了。一種方法就 是製作這樣一個三角形箭頭的圖片，然後定位在矩形框上。但這種解決辦法在後期更改氣泡框會很不方便，可能每修改一次氣泡框都要重新製作一個三角形小表徵圖。 如果我們能夠直接用HTML和CSS代碼實現這樣一個三角形小箭頭一切都迎刃而解了。

1、把div的width和height都設為0，四邊都形成三角形。

# test{width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9;}

2、在主流瀏覽器中檢測一下，發現IE6中存在一個小問題，上下邊能形成三角形，左右兩邊仍然還是梯形。

解決：把div的font-size和line-height都設為0的，此時，div的四邊在IE6下都能形成完美的三角形。

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9; font-size:0; line-height:0;}

3、我們只需要其中的一個三角形，那麼只需要將其他三邊的color設定為透明或者跟頁面背景一樣的顏色，就能類比出一個三角來，推薦將其他三邊顏色設定為透 明，即color的值為transparent，如果其他三邊顏色跟頁面背景一樣，雖然視覺上只能看到一個三角，但背景顏色一旦改變，其他三邊顏色也要隨 之改變。

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F transparenttransparent; font-size:0; line-height:0;}

4、在IE6下transparent無效，其他三邊被設定成預設的黑色了。

解決：把border-style設定為dashed後，IE6下其他三邊就能透明了。

5、到這一步我們已經成功的類比出了一個小三角，下一步我們把這個小三角同矩形框結合起來。先設定一個矩形框，然後把小三角定位到矩形框上。先來寫出HTML結構：

<div class="tag">

<em></em>

CSS氣泡框實現

</div>

.tag{ width:300px; height:100px; border:5px solid #09F; position:relative;}

.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;}

6、

現在指示方向的三角形箭頭是實心的，而我們想要的是鏤空的效果，這裡我們再疊加一個同氣泡框背景顏色一樣的小三角，然後把這個疊加的小三角移動一下位置就能達到了。
首先需要對HTML結構進行調整，如下：

<div class="tag">

<em></em>

<span></span>

CSS氣泡框實現

</div>

CSS樣式修改為：

.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;}

.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;}

.tag span{display:block; border-width:20px; position:absolute; bottom:-33px; left:100px;border-style:solid dashed dashed; border-color:#FFF transparent transparent;font-size:0; line-height:0;}

注意：疊加的小三角span的bottom值並不是border-width的值，兩個小三角bottom的差值理論上應該是2(border-width)2的平方根。

最後來把代碼最佳化一下，以便在後期更容易維護，完整的HTML結構：

<div class="tag">

<div class="arrow">

<em></em><span></span>

</div>

CSS氣泡框實現

</div>

CSS樣式修改為：

.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;}

.arrow{ position:absolute; width:40px; height:40px; bottom:-40px; left:100px; }

.arrow *{ display:block; border-width:20px; position:absolute; border-style:solid dashed dasheddashed; font-size:0; line-height:0; }

.arrow em{border-color:#09F transparent transparent;}

.arrow span{border-color:#FFF transparent transparent; top:-7px;}