1.聊天会话框气泡的实现
我们将一个div的width、height、font-size设置为0，给它一个border-width值，border-color给定四种不同的颜色，此时我们会看到该div由四个三角形组成的，由此我们可以根据需要保留需要的三角形，其他三个三角形定义为透明transparent，最后使用定位。实现代码如下：
HTML：
CSS:
*{
padding:0;
margin: 0;
}
body{
background-color: #aaa;
}
.contain{
margin: 20px auto;
position: relative;
width: 200px;
height: 100px;
border: 1px solid #aaa;
background-color: #fff;
}
.angle {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:transparent #fff transparent transparent;
position: absolute;
top: 30px;
left: -20px;
}
效果图：
