微信聊天气泡

代码块

	<div class='dialogue'>
	   	 <div class="leftd">
	            <div class="leftd_h">
              <image src="../images/ss.jpg"></image>
            	</div>
            	<div class="speech left" ng-class="speech left">京东淘宝京东淘宝京东淘宝京东淘宝</div>
          </div>
      
          <div class="rightd">
            <div class="rightd_h">
                <image src="../images/ss.jpg"></image>
            </div>
            <div class="speech right" ng-class="speech left">京东淘宝京东淘宝京东淘宝</div>
          </div>
      
          <div class="leftd">
            <div class="leftd_h">
              <image src="../images/ss.jpg"></image>
            </div>
            <div class="speech left" ng-class="speech left">
            ，点击接受，前往付款后即可开始
              <div class='new_btn'>
                <text class='btn_accpt'>接受</text>
                <text class='btn_jj'>拒绝</text>
              </div>
            </div>
          </div>
      
          <div class='accpt_text'>您已接受了他的，并且完成付款， 现在可以进行，多长时间。</div>
          <div class='jj_text'>您已拒绝了邀请。</div>
        </div>

css部分

/* 微信气泡 */
/* //对话列表 */
.dialogue{
    width: 690px;
    height: 977px;
    background-color: rgba(244,244,248,1);
    font-size:26px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(98,98,98,1);
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.speech {
    float: left;
    margin: 20px 0;
    padding: 20px;
    table-layout: fixed;
    word-break: break-all;
    position: relative;
    background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#E6E6E6) );
    border: 1px solid #E6E6E6;
    border-radius: 8px;
}
.speech:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 15px;
    top: -20px;
    border: 10px solid;
    border-color: transparent transparent #E6E6E6 transparent;
}
.speech:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 left: 17px;
 top: -16px;
 border: 8px solid;
 border-color: transparent transparent #ffffff transparent;
}
.speech.right {
 display: inline-block;
 margin-right: 18px;
 max-width: 70%;
 float: right;
 background: #15B4F1;
 color: #ffffff;
 font-family:PingFangSC-Regular;
  font-weight:400;
  line-height: 36px;
}
.speech.right:before {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 top: 9px;
 bottom: auto;
 left: auto;
 right: -10px;
 border-width: 9px 0 9px 10px;
 border-color: transparent #15B4F1;
}
.speech.right:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 top: 10px;
 bottom: auto;
 left: auto;
 right: -8px;
 border-width: 8px 0 8px 9px;
 border-color: transparent #15B4F1;
}
.left {
 display: inline-block;
 margin-left: 18px;
 max-width: 70%;
 position: relative;
 background: #ffffff;
 font-family:PingFangSC-Regular;
  font-weight:400;
  line-height: 36px;
}
 .left:before {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 top: 9px;
 bottom: auto;
 left: -10px;
 border-width: 9px 10px 9px 0;
 border-color: transparent #ffffff;
}
 .left:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 top: 10px;
 bottom: auto;
 left: -8px;
 border-width: 8px 9px 8px 0;
 border-color: transparent #ffffff;
}
.leftimg {
 float: left;
 margin-top: 10px;
}
.rightimg {
 float: right;
 margin-top: 10px;
}
.leftd {
  width: 100%;
 clear: both;
 float: left;
 /* margin-left: 10px; */
}
.rightd {
  width: 100%;
 clear: both;
 float: right;
 /* margin-right: 10px; */
}
 
.leftd_h{
 width: 64px;
 height: 64px;
 border-radius: 100%;
 display: block;
 float: left;
 overflow: hidden;
 margin-top:9px;
}
 
.leftd_h>image{
 display: block;
 width: 64px;
 height: 64px;
}
.rightd_h{
 width: 64px;
 height: 64px;
 border-radius: 100%;
 display: block;
 float: right;
 overflow: hidden;
 margin-top:9px;
}
 
.rightd_h>image{
 display: block;
 width: 64px;
 height: 64px;
}
/* //按钮 */
.new_btn{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:20px;
  font-size:26px;
  font-family:PingFangSC-Regular;
  font-weight:400;
}
.btn_accpt{
  display: inline-block;
  width: 153px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border:1px solid rgba(45,179,236,1);
  color: #2DB3EC;
  border-radius:10px;
}
.btn_jj{
  display: inline-block;
  width: 153px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border:1px solid rgba(153,153,153,1);
  color: #4A4A4A;
  border-radius:10px;
}

.accpt_text,.jj_text{
  min-width: 300px;
  float: left;
  display: block;
  margin: 20px auto;
  padding: 10px 30px;
  background:rgba(0,0,0,1);
  border-radius:10px;
  opacity:0.2;
  line-height: 45px;
  text-align: center;
  color: #FFFFFF;
  font-size:24px;
  font-family:PingFangSC-Regular;
  font-weight:400;
}

实现结果！有图有真相

原始版本 可根据业务修改