关于纯CSS实现气泡图案，大概如下图：
为什么不用图片代替？当然是为了页面优化的缘故，加载一张图片会增多一次http请求，对于完美主义的页面重构者，是无法接受的。那么这个纯CSS的聊天气泡效果是怎么实现的?
【border小三角技巧】
一个DIV：
<div id="wrap" ></div>
当宽度和高度都为0 的时候：
#wrap{ 0; height:0; border-color:#F00 #00F #F0F #999; border-style:solid; border-20px;
line-height:0; font-size:0; }
会呈现以上效果。当设置其他边为白色，或者透明的时候，
#wrap1{ 0; height:0; border-color:#F00 #F00 transparent transparent; border-style:solid;
border-20px 10px;line-height:0; font-size:0; border-style:solid solid dashed dashed; }
将会出现下面的效果：
在多说几句，transparent在一般浏览器上，可以实现透明效果，但IE6要用dashed来实现，具体原因请看文章结束处的参考资料.
有了上面这些基础的时候，实现聊天气泡的效果就不再是难事，没错，用两个三角行组合就可以实现了。具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#top{ font-size:0; 200px; line-height:0; height:0; border-color: #FFF #FFF #000 #FFF ;
border-style:solid; border-1px; }
#bottom{font-size:0; 200px; line-height:0; height:0; border-color:#000 #FFF #FFF #FFF ;
border-style:solid; border-1px; }
#center{ height:60px; border-style:solid; border-0 1px 0 1px; 201px; position:relative;}
#reg{0; height:0; font-size:0; overflow:hidden; position:absolute; right:-40px; top:20px;
border-style:solid; border-20px; border-style: dashed dashed solid solid ; border-color:
transparent transparent #000 #000;}
#sreg{ 0; height:0; font-size:0; overflow:hidden;position:absolute; top:41px; right:-41px;
border-style:solid; border-10px 20px;
border-style:dashed dashed solid solid; border-color:transparent transparent #fff #fff; }
</style>
</head>
<body>
<div id="top"></div>
<div id="center">
<span>嘿，这是一个纯气泡</span>
<div id="reg"></div>
<div id="sreg"></div>
</div>
<div id="bottom"></div>
</body>
</html>
参考资料：淘宝UED博客 乔花《CSS Border使用小分享》