html css聊天窗口气泡,CSS实现短信气泡对话框

今天一朋友问我，像微信这聊天模式，网页上可以实现不，然后正好手里事情不多，就研究了下，主要是小三角比较难做，就在网上找找资料，研究了下，出来了，嗯。兼容性，IE下，没有圆角。

上图：

下面为各位上代码：

CSS代码 以下代码中缺少清楚浮动样式：

.bubble { margin:0px auto; width:320px; }

.demo {

margin-bottom:20px;

padding-left:50px;

position:relative;

}

.triangle {

position:absolute;

top:50%;

margin-top:-8px;

left:42px;

display:block;

width:0;

height:0;

overflow:hidden;

line-height:0;

font-size:0;

border-bottom:8px solid #FFF;

border-top:8px solid #FFF;

border-left:none;

border-right:8px solid