首先，來張大圖：

上邊這張黃黃的，大大的，圓圓的，有個小尾巴，文字內容有些YY的圖片，就是使用純CSS實現的氣泡對話框效果，一點圖片都沒有哦?？吹竭@里，你是不是跟我一樣，有些驚嘆CSS的潛力呢。關于這張圖片，暫時先放到一邊，下面我要講一些與主旨相關的比較重要的，同時又很實用的一些技術。

我們首先看下面這一張圖片（截自人人網）：

可能顏色有點淡，在左上角有個90度的尖角，于是整個形成了一個氣泡對話框。現在考考你，如果你來實現這個效果，你會怎么做？//zxx:假設你已經思考了一會兒｡◕‿◕｡ 我想，如果您沒有看本文標題，可能就想到的是做個90度等腰三角形小圖片；就算您知道可以用CSS實現上面的效果，但是您知道是什么方法嗎？當然，是絕對兼容的方法（從已經在美國辦了隆重葬禮的IE6到很多人喜歡的Firefox和Safari）。您有主意嗎？

好，我們先來看看人人網是怎么實現的，我們用小bug（//zxx:指firebug，我喜歡親切的稱之為“小bug”）看一看，原來也是使用的圖片，600*6像素的圖片，見下圖：

查看此圖片點此鏈接：http://xnimg.cn/imgpro/box/box_arrow.png

這可是活生生的多了一次圖片請求啊，而且是個獨立的小圖片，關鍵是在訪問量驚人的首頁上。優秀與平庸的差異在哪里呢？前者追求極致，后者追隨大流。

這里的圖片完全沒有必要，使用CSS可以實現近乎一樣的效果，并且方法不止一種，我目前知道的有兩種方法可以實現上面人人網的氣泡對話框效果。我將這兩個方法自己定義為“邊框法”與“字符法”。

1. 字符法
關于“字符法”，其實在我的“告別圖片—使用字符實現兼容性的圓角尖角效果beta版”一文中已經比較詳盡的提及過。

這里再簡單講述下，世界上的語言多種多樣，字符的種類也是千差萬別，形狀也是千奇百怪，所以，有些字符就可以當作圖形來使用，以模擬一些web表現效果。例如，上面的人人網對話框尖角就可以使用棱形字符(◆)來實現，看到這個形狀上面的90度的尖角了嗎，我們可以讓其溢出div顯示，不就有了尖角效果了嗎！定位可以使用margin負值或是absolute絕對定位。