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>