html 图片 气泡,微信气泡的图片铺满怎么做的？canvas做出来吗？css呢？

提供一个兼容性不高的方法，效果还行，利用css3的clip-path属性和border-radius属性。

代码地址：看这里，其中图片右上端和右下的圆角和左上左下的圆角的半径不一样，是因为被剪切掉了，所以要加大半径来模拟效果。

分割线，不过有个思路，可以用js控制切割的路径，比如说向右边的圆角，那是四分之一弧，可以模拟100个或者更多个点，他们之间的连线就可以大概模拟出一个四分之一弧了。要计算大量的坐标，题主可以试试，我还在试

---------- 好了，更新----------------------------------------------

看效果：点这里

代码主要就是生成polygon函数的参数，polygon是多边形，其中我给那个小三角的位置固定了，没有整成参数。

左上和左下的圆角是用的border-radius生成的，右上角和右下角的是绘制路径剪切而成

/**

@r {number} 圆角的宽度

@x {number} 图片的宽度

@y {number} 图片的高度

*/

function makeTopPointPos(r,x,y){

var angle,rx,ry,a,b,item;var arr=[];

for(var i=0;i<2000;i++){

angle=i/1000*Math.PI/2;

rx=0.95*x-r+r*Math.cos(angle);

ry=r-r*Math.sin(angle);

a=rx/x*100+'%';

b=ry/y*100+'%';

item=a+' '+b;

arr.push(item);

}

return arr;

}

function makeBottomPointPos(r,x,y){

var angle,rx,ry,a,b,item;var arr=[];

for(var i=0;i<2000;i++){

angle=i/1000*Math.PI/2;

rx=0.95*x-r+r*Math.sin(angle);

ry=y-r+r*Math.cos(angle);

a=rx/x*100+'%';

b=ry/y*100+'%';

item=a+' '+b;

arr.push(item);

}

return arr;

}

var topPoints=makeTopPointPos(20,200,200).join(',');

var bottomPoints=makeBottomPointPos(20,200,200).join(',');

function makeParams(r,x,y){

var rtx=(0.95*x-r)/x*100+'%';

var rty=r/y*100+'%';

var rbx=(0.95*x-r)/x*100+'%';

var rby=(y-r)/y*100+'%';

var html='(0% 0%,0% 100%,'+rtx+' 100%,'+bottomPoints+', 95% '+rby+',95% 35%,100% 32%,95% 29%,95% '+rty+','+topPoints+','+rtx+' 0%)';

return html;

}

@沉然静寂 题主再来瞅瞅

-------更新-------------------------------

写了篇文章，可以很方便的得出这种气泡图的效果，可以来瞅瞅文章

参考：css-tricks