纯CSS实现气泡图案

关于纯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使用小分享》