position: relative
background: #88b7d5
border: 4px solid #c2e1f5
}
.arrow_box:after, .arrow_box:before {
left: 100%
top: 50%
border: solid transparent
content: " "
height: 0
width: 0
position: absolute
pointer-events: none
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0)
border-left-color: #88b7d5
border-width: 10px
margin-top: -10px
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0)
border-left-color: #c2e1f5
border-width: 16px
margin-top: -16px
}
用微信这么多年，刚刚发现这个问题，上个图说一下：
当聊天发送图片时，气泡右侧小三角里面显示的也是图片，这是怎么实现的呢，当然原生app实现起来很容易啦，
对于前端小伙伴，用css实现的办法我查了一些资料，结果不是很完美
下面给出一个canvas画出的气泡：
2、先定义好 在页面加载完成后使用:
image.onload = draw
3、使用匿名函数: window.onload = function(){alert(321)
......先慢慢研究下吧
transform:skewX(30deg)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变
元素的形状。skew()函数不会旋转，而只会改变元素的形状。
一个参数：表示水平方向的倾斜角度；
两个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
气泡需要两个组合
