效果：

css实现聊天对话框效果_html


可以看做是一个长方形和一个三角形组成的，关键css代码：

#talk {
   margin-left: 50px;
   width: 220px;
   height: 60px;
   background: #9EEA6A;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talk:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 16px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #9EEA6A;
   border-bottom: 13px solid transparent;
}
html：
<div id="talk"></div>
  <div id="talk2"></div>