氣泡框（或者提示框）是網頁中一種很常見的元素，大多用來展示提示信息，如下圖所示：
拆分來看，形如這種氣泡框無外乎就是一個矩形框+一個指示方向的三角形小箭頭，要制作出這樣的氣泡框，如果解決了三角形小箭頭就容易了。一種方法就是制作這樣一個三角形箭頭的圖片，然后定位在矩形框上。但這種解決辦法在后期更改氣泡框會很不方便，可能每修改一次氣泡框都要重新制作一個三角形小圖標。如果我們能夠直接用HTML和CSS代碼實現這樣一個三角形小箭頭一切都迎刃而解了。
首先我們來看一下border這個屬性，當我們把一個div的border-color設為不同值的時候，可以看到四邊都成了一個梯形。
|
1
|
# test{
width
:
50px
;
height
:
50px
;
border-width
:
50px
;
border-style
:
solid
;
border-color
:
#09F
#990
#933
#0C9
;}
|
如果我們繼續把這個div的width和height都設為0，可以看到四邊都成了一個三角形。
|
1
|
# test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
;
border-color
:
#09F
#990
#933
#0C9
;}
|
在主流瀏覽器中檢測一下，發現IE6中存在一個小問題，上下邊能形成三角形，左右兩邊仍然還是梯形
通過實驗發現當把div的font-size和line-height都設為0的時候，div的四邊在IE6下都能形成完美的三角形：
|
1
|
#test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
;
border-color
:
#09F
#990
#933
#0C9
;
font-size
:
0
;
line-height
:
0
;}
|
很顯然我們只需要其中的一個三角形，那么只需要將其他三邊的color設置為透明或者跟頁面背景一樣的顏色，就能模擬出一個三角來，推薦將其他三邊顏色設置為透明，即color的值為transparent，如果其他三邊顏色跟頁面背景一樣，雖然視覺上只能看到一個三角，但背景顏色一旦改變，其他三邊顏色也要隨之改變。
|
1
|
#test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
|
問題又來了，IE6下transparent無效！其他三邊被設置成默認的黑色了。
但通過實驗發現把border-style設置為dashed后，IE6下其他三邊就能透明了！
|
1
|
#test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
dashed
dashed
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
|
到這一步我們已經成功的模擬出了一個小三角，下一步我們把這個小三角同矩形框結合起來。先設置一個矩形框，然后把小三角定位到矩形框上。先來寫出HTML結構：
|
1
2
3
4
|
<
div
class="tag">
<
em
></
em
>
CSS氣泡框實現
</
div
>
|
CSS樣式：
|
1
2
|
.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
;}
|
效果如下：
現在指示方向的三角形箭頭是實心的，而我們想要的是鏤空的效果，這里我們再疊加一個同氣泡框背景顏色一樣的小三角，然后把這個疊加的小三角移動一下位置就能達到了。
首先需要對HTML結構進行調整，如下：
|
1
2
3
4
5
|
<
div
class="tag">
<
em
></
em
>
<
span
></
span
>
CSS氣泡框實現
</
div
>
|
CSS樣式修改為：
|
1
2
3
|
.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結構：
|
1
2
3
4
5
6
|
<
div
class="tag">
<
div
class="arrow">
<
em
></
em
><
span
></
span
>
</
div
>
CSS氣泡框實現
</
div
>
|
CSS樣式修改為：
|
1
2
3
4
5
|
.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
dashed
dashed
;
font-size
:
0
;
line-height
:
0
; }
.arrow em{
border-color
:
#09F
transparent
transparent
;}
.arrow span{
border-color
:
#FFF
transparent
transparent
;
top
:
-7px
;}
|
舉一反三：不規則三角箭頭的氣泡框又如何實現？
HTML結構同前面一樣：
|
1
2
3
4
5
6
|
<
div
class="tag">
<
div
class="arrow">
<
em
></
em
><
span
></
span
>
</
div
>
CSS氣泡框實現
</
div
>
|
矩形框CSS樣式稍微改動一下：
|
1
|
.tag{
width
:
300px
;
height
:
100px
;
position
:
relative
;
background-color
:
#09F
;}
|
重新定位一下三角箭頭：
|
1
|
.arrow{
position
:
absolute
;
width
:
70px
;
height
:
60px
;
left
:
-70px
;
bottom
:
10px
;}
|
元素相鄰的兩邊border-style值設為solid（顯示），另兩邊設為transparent（不會顯示）
|
1
|
.arrow *{
display
:
block
;
position
:
absolute
;
border-style
:
dashed
solid
solid
dashed
;
font-size
:
0
;
line-height
:
0
; }
|
首先模擬一個直角三角形，把一個元素的相鄰兩邊color設為相同的值，另外兩邊顏色設為透明，即可得到一個直角：
|
1
|
.arrow em{
border-color
:
transparent
#09F
#09F
transparent
;
border-width
:
30px
35px
;}
|
把兩個直角三角形重疊在一起就可以得到一個不規則三角形
|
1
|
.arrow span{
border-width
:
20px
35px
;
border-color
:
transparent
#FFF
#FFF
transparent
;
bottom
:
0
;}
|
至此，不規則三角箭頭的氣泡框效果已經實現。
除了通過設置元素的border來模擬小三角之外，還可以用特殊字符來模擬，用特殊字符模擬小三角同樣需要用到定位和重疊覆蓋，只不過不需要調整border屬性了。
先來看一個菱形“◆” ，它在頁面中的代碼是“◆”，需要注意的是頁面編碼需要設置為utf-8，在網頁中可以把◆當作文字處理，可以通過調整font-size來它的大小、通過color來設置它的顏色。
HTML結構依然用前面的，不同的是在em、span標簽中加入了 ◆
|
1
2
3
4
5
6
|
<
div
class="tag">
<
div
class="arrow">
<
em
>◆</
em
><
span
>◆</
span
>
</
div
>
CSS氣泡框實現
</
div
>
|
先來設置最外層div的樣式，得到一個矩形框：
|
1
|
.tag{
width
:
300px
;
height
:
100px
;
position
:
relative
;
border
:
5px
solid
#09F
;}
|
接着定位箭頭最外層容器div，便於觀察可以先設置一個背景色 ：
|
1
|
.arrow{
position
:
absolute
;
width
:
40px
;
height
:
40px
;
left
:
100px
;
bottom
:
-40px
;
overflow
:
hidden
;}
|
再對◆設置樣式：
|
1
|
.arrow *{
display
:
block
;
position
:
absolute
;
font-size
:
40px
;
line-height
:
40px
;
width
:
40px
;
font-family
:SimSun;
font-style
:
normal
;
font-weight
:
normal
;
text-align
:
center
;
vertical-align
:
middle
;}
|
注意：為了◆主流瀏覽器中顯示一致，需要清除瀏覽器的默認字體樣式，特別注意這里字體的設置
再分別修改em、span標簽的字體顏色，並對這兩個標簽定位：
|
1
2
|
.arrow em{
color
:
#09F
;
top
:
-15px
;}
.arrow span{
color
:
#FFF
;
top
:
-22px
;}
|
注意：該例子中em和span兩個元素垂直方向相差約7px，原來同上面提到的一樣，差值理論上應該是2(border-width)2的平方根
完整CSS樣式：
|
1
2
3
4
5
|
.tag{
width
:
300px
;
height
:
100px
;
position
:
relative
;
border
:
5px
solid
#09F
;}
.arrow{
position
:
absolute
;
width
:
40px
;
height
:
40px
;
left
:
100px
;
bottom
:
-40px
;
overflow
:
hidden
;}
.arrow *{
display
:
block
;
position
:
absolute
;
font-size
:
40px
;
line-height
:
40px
;
width
:
40px
;
font-family
:SimSun;
font-style
:
normal
;
font-weight
:
normal
;
text-align
:
center
;
vertical-align
:
middle
;}
.arrow em{
color
:
#09F
;
top
:
-15px
;}
.arrow span{
color
:
#FFF
;
top
:
-22px
;}
|
最終效果如下：
HTML特殊字符查詢：http://ikwebdesigner.com/special-characters/
補充：以上方式實現小三角的過程中不可避免的增加了多余的標簽，如果不要求所有瀏覽器中顯示一致的話， 我們可以利用css3來實現這個小三角
HTML結構：
|
1
2
3
|
<
div
class="tag">
css3氣泡框
</
div
>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.tag{
width
:
300px
;
height
:
100px
;
border
:
5px
solid
#09F
;
position
:
relative
;
background-color
:
#FFF
;
}
.tag:before,.tag:after{
content
:
""
;
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:after{
bottom
:
-33px
;
border-color
:
#FFF
transparent
transparent
;
}
|
效果同上。