纯CSS代码实现各类气球泡泡对话框效果

首先，来张大图：

上边这张黄黄的，大大的，圆圆的，有个小尾巴，文字内容有些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绝对定位。