微信聊天气泡三角显示图片实现之canvas

html-css013

微信聊天气泡三角显示图片实现之canvas,第1张

用微信这么多年，刚刚发现这个问题，上个图说一下：

当聊天发送图片时，气泡右侧小三角里面显示的也是图片，这是怎么实现的呢，当然原生app实现起来很容易啦，

对于前端小伙伴，用css实现的办法我查了一些资料，结果不是很完美

下面给出一个canvas画出的气泡：

2、先定义好 在页面加载完成后使用:

image.onload = draw

3、使用匿名函数: window.onload = function(){alert(321)

......先慢慢研究下吧

transform:skewX(30deg)

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变

元素的形状。skew()函数不会旋转，而只会改变元素的形状。

一个参数：表示水平方向的倾斜角度；

两个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

气泡需要两个组合

<div class="send">

<div class="arrow"></div>

</div>

<style type="text/css">

body {

background:#4D4948

}

.send {

position:relative

width:150px

height:35px

background:#F8C301

border-radius:5px /* 圆角 */

margin:30px auto 0

}

.send .arrow {

position:absolute

top:5px

right:-16px /* 圆角的位置需要细心调试哦 */

width:0

height:0

font-size:0

border:solid 8px

border-color:#4D4948 #4D4948 #4D4948 #F8C301

}

</style>