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

个人简介

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

主目录

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