css--画一个带有边框的三角形（类似于QQ的聊天框）

.chat{
      width: 300px; 
      height: 80px; 
      border: 1px solid #ccc; 
      position: relative;
} 

.chat:before{
    content: "";
    position: absolute; 
    left: -10px; 
   top: 34px; 
   border-top: 6px solid transparent; 
   border-bottom: 6px solid transparent; 
   border-right: 10px solid #ccc;
}  

.chat:after{
   content: "";
   position: absolute; 
   left: -8px; 
   top: 34px; 
   border-top: 6px solid transparent; 
   border-bottom: 6px solid transparent; 
   border-right: 10px solid #fff; 
}