比如 的回复效果，没有用到图片
实际上这里用了css的两个特性
CSS边框交界
可以看看下面这段代码的效果
.test {width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
用before和after伪类
这两个伪类ie6和7不支持。它的实际作用就是如果你定义了.test:before和.test:after伪类，那么你就好比.test的元素前面和后面分别插入了两个元素。
结合这两个方法，我们就可以在不破坏原有结构的情况下创造对话框效果了。
参考这里：http://sofish.de/2044
- 灰框元素里再写个空白标签, 通过设置 border 可以弄出来3角内裤状..然后浮动/定位到相应位置
- 不管老ie的话,在 :after 里面随便玩玩就出来了
可参考这里： http://ued.taobao.com/blog/2010/08/04...
使用额外无意义的 div 可以完成纯 css 的泡框效果，但不推荐因为效果而加入无意义的 html 结构，但目前的情况来讲除 ie 系列外似乎现代浏览器都能很好搞定这个问题
以前做过一个PageCookery的主题
.entry{
width:-moz-fit-content;width:intrinsic;
border-radius:10px;
padding:5px 10px;
margin:20px auto auto;
border:1px solid #d0d0d0;
border-color:#d0d0d0 #ccc #ccc #d0d0d0;
background:#e9e9e9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(245,245,245,0.8)),color-stop(1, rgb(225,225,225,0.8)));
background:-moz-linear-gradient(center top,rgba(245,245,245,0.8) 5px,rgba(225,225,225,0.8) 100%);
-moz-transition:all 1s ease-out;-webkit-transition:all 1s ease-out;transition:all 1s ease-out;
box-shadow:#ccc 1px 2px 2px;}
.entry:hover{
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(245,245,245,1)),color-stop(1, rgb(225,225,225,1)));
background:-moz-linear-gradient(center top,rgba(245,245,245,1) 5px,rgba(225,225,225,1) 100%);
box-shadow:#ccc 1px 2px 8px;
}
.entry:after{
content:" ";
margin:-6px 0px 0px 0px;
border:10px solid transparent;
position:absolute;
border-color:#d0d0d0 transparent transparent transparent;
-moz-transform: rotate(135deg);-webkit-transform: rotate(135deg);transform: rotate(135deg);
}