css--畫一個帶有邊框的三角形（類似於QQ的聊天框）

使用css畫出如下的聊天框：

結構：<div class="chat"></div>

css:

.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; 
} 

使用:before畫出一個深色的三角形，然后使用:after畫出一個白色的三角形，兩個三角形錯開2px。