CSS聊天气泡框的两种方式

方法一

      实现相对来说比较简单，建议使用

.tip {
    margin: 18px 5px auto 10px;
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    float: left;
   }
   .tips {
    margin: 18px 5px auto 5px;
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    float: right;
   }
   /* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */
   
   .tip:before {
    position: absolute;
    display: inline-block;
    border-top: 7px solid transparent;
    border-right: 7px solid #eee;
    border-bottom: 7px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.2);
    left: -8px;
    top: 20px;
    content: '';
   }
   .tips:before {
    position: absolute;
    display: inline-block;
    border-top: 7px solid transparent;
    border-left: 7px solid #eee;
    border-bottom: 7px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.2);
    right: -8px;
    top: 20px;
    content: '';
   }
   /* 背景阴影*/
   
   .tip:after {
    position: absolute;
    display: inline-block;
    border-top: 6px solid transparent;
    border-right: 6px solid #eee;
    border-bottom: 6px solid transparent;
    left: -6px;
    top: 21px;
    content: '';
   }
   .tips:after {
    position: absolute;
    display: inline-block;
    border-top: 6px solid transparent;
    border-left: 6px solid #2C97E8;
    border-bottom: 6px solid transparent;
    right: -6px;
    top: 21px;
    content: '';
   }

<div style="width: 100%;">
           <img src="img/logo.png" style="width:50px;border-radius: 50%;float:left;margin-left: 8px;margin-top: 18px;display: inline;">
           <div class="tip" id="tip" style="display: inline;width: 50%;width: 50vw;font-size: 19px;margin-left: 10px;">
            大夫郑重提示：因为不能面诊患者，无法全面了解病情，以上建议仅供参考，具体诊疗请一定到医院在医生指导下进行！
           </div>
          </div>
          <div style="clear: both;height: 20px;">
           
          </div>
          <div style="width: 100%;font-size: 19px;">
           <img src="img/logo.png" style="width:50px;border-radius: 50%;margin-right:8px;float:right;margin-top: 18px;display: inline-block;">
           <div class="tips" id="tips" style="background-color: #2C97E8;display: inline-block;width: 50%;width: 50vw;font-size: 19px;margin-right:10px;">
            大夫郑重提示：因为不能面诊患者，无法全面了解病情，以上建议仅供参考，具体诊疗请一定到医院在医生指导下进行！
           </div>
          </div>

方法二

.box {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
   }
   .triangle-1 {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px;
    border-color: transparent #00f transparent transparent;
   }
   .triangle-2 {
    display: block;
    position: absolute;
    left: 16px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px;
    border-color: transparent #fff transparent transparent;
   }

 <div class="box">
   <div class="triangle-1"></div>
   <div class="triangle-2"></div>
   <div class="box-content">提示内容...</div>
  </div>

转载于:https://my.oschina.net/u/2345713/blog/517265