純CSS氣泡框實現方法探究

時間 2019-11-11

標籤 css 氣泡實現方法探究欄目 CSS 简体版

原文原文鏈接

氣泡框（或者提示框）是網頁中一種很常見的元素，大多用來展現提示信息，以下圖所示：css

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

首先咱們來看一下border這個屬性，當咱們把一個div的border-color設爲不一樣值的時候，能夠看到四邊都成了一個梯形。css3

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

若是咱們繼續把這個div的width和height都設爲0，能夠看到四邊都成了一個三角形。web

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下其餘三邊就能透明瞭！spa

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結構：3d

< div class="tag">

< em ></ em >

CSS氣泡框實現

</ div >

CSS樣式：

.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結構進行調整，以下：

< 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 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)²的平方根

最後來把代碼優化一下，以便在後期更容易維護，完整的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 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結構同前面同樣：

< 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標籤中加入了 ◆

< 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樣式：

.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結構：