div+CSS制作类似微信对话气泡效果的实例总结

    background: url(../img/msg_bg_lr.png) no-repeat -63px -14px;   
    display: inline-block;   
    width: 26px;   
    height: 16px;   
    position: absolute;   
    top: 5px;   
}   
  
.customer_lists .header_img_hover {   
    position: absolute;   
    background: url(../img/avatar_mask_01.png);   
    top: 0;   
    width: 50px;   
    height: 50px;   
}   
.customer_lists .header_img {   
    position: absolute;   
    top: 0;   
    rightright: 14px;   
    width: 50px;   
    height: 50px;   
}   
 .clearfix:after {   
    content: " .";   
    display: block;   
    clear: both;   
    visibility: hidden;   
    height: 0;   
}  

二、背景式：

第二种主要是使用了：before伪类画出了三角形，然后用定位拼在了一起。

XML/HTML Code复制内容到剪贴板

<div class="jimi_lists clearfix">  
                <div class="header_img jimi3 fl"></div>  
                <div class="bkbubble right">  
                     <p>换个气泡如何</p>  
                </div>  
            </div>  
            <div class="customer_lists clearfix">  
                <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">