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

[haizhilin2013]

第330天 使用css实现对话气泡的效果

我也要出题

[cxwht]

一个带圆角的长方形/椭圆 加上before伪类贴在左边或者右边的小三角形三角形

[jasonzhouu]

将气泡分为2个部分：

部分	描述
矩形	主体部分
箭头	用before/after伪元素创建的正方形

箭头的创建方法：将正方形旋转45°，并移到矩形边缘，露出一半的尖角。

移动方法是用 absolute position，设置其相对矩形的位置，距离矩形顶部 50% - 0.5em，距离矩形右侧边缘 0.5em（设置right为负数，表示移到外面）。

[lincimy]

方法：使用圆角矩形作为对话的主体框，左侧或右侧增加附加三角形，三角形使用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;
    }

[longhui520]

   p.speech{
           position: relative;
           width: 50px;
           border:1px solid #666;
           padding: 2px;
           border-radius: 4px; 
       }
   p.speech::before{
       position: absolute;
       content: "";
       top:9px;
       left:-12px;
       width: 0;
       border:6px solid;
       border-color:transparent #666  transparent transparent;
   }

• 你需要知道的css