使用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。
css--画一个带有边框的三角形（类似于QQ的聊天框）
原文地址：http://www.cnblogs.com/lovemoli/p/7999512.html