通过border来实现小三角形，模拟微信的对话框：
<div class="left"><p>你好，我是卖茶叶的</p></div><div class="right"><p>你好，我是种茶的</p></div>
其中，CSS这样设置：
.left,.right{min-height: 60px;position: relative;left: 10px;display: table;text-align: center;border-radius: 7px;background-color:#9EEA6A;}.right{/*使左右的对话框分开*/top: 20px;left: 150px;background-color: #FC3;}.left > p,.right > p{ /*使内容居中*/display: table-cell;vertical-align: middle;padding: 0 10px;}.left:before,.right:after{ /*用伪类写出小三角形*/content: '';display: block;width: 0;height: 0;border: 16px solid transparent;position: absolute;top: 11px;}/*分别给左右两边的小三角形定位*/.left:before{ border-right: 16px solid #9EEA6A;left: -30px;}.right:after{ border-left: 16px solid #FC3;right: -30px;}
