纯CSS实现气泡图案

关于纯CSS实现气泡图案，大概如下图：

为什么不用图片代替？当然是为了页面优化的缘故，加载一张图片会增多一次http请求，对于完美主义的页面重构者，是无法接受的。那么这个纯CSS的聊天气泡效果是怎么实现的?

【border小三角技巧】

一个DIV：

1	`<div` `id="wrap" ></div>`

当宽度和高度都为0 的时候：

1	`#wrap{ width:0; height:0; border-color:#F00 #00F #F0F #999; border-style:solid; border-width:20px;line-height:0; font-size:0; }`

会呈现以上效果。当设置其他边为白色，或者透明的时候，

1	`#wrap1{ width:0; height:0; border-color:#F00 #F00 transparent transparent; border-style:solid; border-width: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; width:200px; line-height:0; height:0; border-color:  #FFF #FFF #000 #FFF ; border-style:solid;  border-width:1px; }
#bottom{font-size:0; width:200px; line-height:0; height:0; border-color:#000  #FFF #FFF  #FFF ; border-style:solid;  border-width:1px; }
#center{ height:60px; border-style:solid; border-width:0 1px 0 1px; width:201px; position:relative;}
#reg{width:0; height:0; font-size:0; overflow:hidden; position:absolute; right:-40px; top:20px; border-style:solid; border-width:20px; border-style: dashed dashed solid solid ; border-color: transparent transparent #000 #000;}
#sreg{ width:0; height:0; font-size:0; overflow:hidden;position:absolute; top:41px; right:-41px; border-style:solid; border-width: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>