最近打算折腾一下网站的问答分类，所以在网上找了一个css实现对话框的效果，具体效果如下图：
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;
}
#talk2 {
*margin-left: 50px;
float:right;
width: 220px;
height: 60px;
background: #9EEA6A;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talk2:before {
content:"";
position: absolute;
left: 100%;
top: 16px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-left: 26px solid #9EEA6A;
border-bottom: 13px solid transparent;
}html代码
可以写个简单的html查看一下具体效果
<html>
<div id="talk"></div>
<div id="talk2"></div>
</html>本文来源：【css实现聊天对话框效果】
由思享SEO博客编辑转载，仅用于参考学习，如有侵权请联系本站修改删除！