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

上图：

好了，废话不多说，上Demo：http://demo.webjyh.com/bubble/

下面为各位上代码：

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 #3079ED;
}

.demo .article {
    float:left;
    color:#FFF;
    display:inline-block;
    *display:inline; zoom:1;
    padding:5px 10px;
    border:1px solid #3079ED;
    background:#eee;
    border-radius:5px;
    background-color: #4D90FE;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
    background-image:-webkit-linear-gradient(top,#4D90FE,#4787ED);
    background-image:-moz-linear-gradient(center top , #4D90FE, #4787ED);
    background-image:linear-gradient(top,#4D90FE,#4787ED);
}

.fr { padding-left:0px; padding-right:50px; }

.fr .triangle {
    left:auto;
    right:42px;
    border-bottom:8px solid #FFF;
    border-top:8px solid #FFF;
    border-right:none;
    border-left:8px solid #3079ED;
}

.fr .article {
    float:right;
}

HTML结构：

<div class="bubble">
        <div class="demo clearfix">
            <span class="triangle"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
        <div class="demo clearfix fr">
            <span class="triangle right"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
	<div class="demo clearfix">
            <span class="triangle right"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
        <div class="demo clearfix">
            <span class="triangle right"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
        </div>
        <div class="demo clearfix fr">
            <span class="triangle"></span>
            <div class="article">我发短信给你了我发短信给你了我发短信给你了我发短信给你了</div>
    </div>
</div>

好了就这么多，，其实很简单的，，小三角上下也是可以的，，，我这就不写了，