一款css3结合jquery的聊天界面

为了让项目更加的“亲民”，这种聊天的需求越来越常见，今天，我们就从第一步开始，写一个简单轻便复用性高的聊天界面
这次，不先上代码，先上图

不急，下面会贴出全部的代码！现在，咱们先来聊聊制作这个界面的主要几个点
1、纯CSS3实现聊天框小尖角，即边框法

![Uploading WechatIMG8_908204.jpeg …]
* 边框法
简单点说，就是用两个标签或无标签 – 使用:before与:after伪类，形成的两个不同的边框进行组合显示实现的一些效果。

html代码
<ul class="chat-thread"> 
   <li>我是用边框法实现的指向右侧的对话框噢～</li>
    <li>我是用边框法实现的指向左侧的对话框噢～</li>
</ul>
css3代码
.chat-thread {    margin: 24px auto 0 auto;    padding: 0 20px 0 0;    list-style: none;    overflow-y: scroll;    overflow-x: hidden;}
.chat-thread li {    position: relative;    clear: both;    display: inline-block;    padding: 16px 40px 16px 20px;    margin: 0 0 20px 0;    font: 16px/20px 'Noto Sans', sans-serif;    border-radius: 10px;    backgro