使用css绘制聊天气泡-526互联

实现原理：给聊天区域的边框补充一个三角形

1：左三角聊天气泡

.left-box{
  max-width: 540rpx;
  min-height: 80rpx;
  border-radius: 10rpx;
  border: 2rpx solid #D7D7D7;
  position: relative;
  padding: 20rpx;
}

.left-box:before,
.left-box:after {
  position: absolute;
  content: '';
  border: 10px solid;
}

.left-box:before {
  left: -20px;
  top: 15px;
  border-color: transparent #D7D7D7 transparent transparent;
}

.left-box:after {
  border-color: transparent #fff transparent transparent;
  left: -19px;
  top: 15px;
}

2: 右三角气泡

.right-box{
  max-width: 540rpx;
  min-height: 80rpx;
  border-radius: 10rpx;
  border: 2rpx solid #D7D7D7;
  position: relative;
  padding: 20rpx;
}

.right-box:before,
.right-box:after {
  position: absolute;
  content: '';
  border: 10px solid;
}

.right-box:before {
  right: -20px;
  top: 15px;
  border-color: transparent transparent transparent #D7D7D7;
}

.right-box:after {
  border-color: transparent transparent transparent #fff;
  right: -19px;
  top: 15px;
}