[css] 使用css实现对话气泡的效果

方法：使用圆角矩形作为对话的主体框，左侧或右侧增加附加三角形，三角形使用border样式设置来实现，相对定位和绝对定位结合使三角形附于圆角矩形左侧或右侧；
html:
<div class="dialog-box">测试对话框</div>
css:.dialog-box{display: inline-block;background-color: #ccc;font-size: 14px;padding: 10px;border-radius: 5px;color: #fff;position: relative;}.dialog-box:before{content: "";width: 0;height: 0;border-width: 6px;border-style: solid;border-color: transparent #ccc transparent transparent;position: absolute;left: -12px;top: 50%;margin-top: -6px;}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题