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

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

java monogodb 图片 pdf 下载添加单个水印铺满水印
这是基于monogodb 下载后添加水印的介绍不管你现在用的是本地下载还是其他的服务器输出后的结果都是添加水印基本的操作一样的都是通过流下载的然后添加水印 ! 这边的所有操作都是基于这个官网的 ...
微信html5图片裁切,微信小程序图片裁剪工具we-cropper
微信小程序图片裁剪工具we-cropper 一款灵活小巧的canvas图片裁剪器在线体验 Feature 实用的API 灵活的钩子函数多场景的demo可供参考: 常规裁剪上传裁剪头像裁剪网络图 ...
微信缓存dat怎么转图片_微信怎么把图片dat转为jpg？去哪下载
微信dat转码软件使用操作说明在线解码,各位同学下载软件后,如何操作?如何找到dat文件?如何使用?又有哪些注意事项呢?这里会为大家一一道来.问题1 :如果下载失败怎么办?请先检查网络,软件并没有放在 ...
python图片二进制流转换成图片_微信如何将图片转换成word文字
每天和手机微信相依为命,小编想问问你们,对于微信的使用,你到底了解多少?比如,你知道原来微信也可以随时翻译多国语言,可以把图片直接转换成你需要的大片文字吗? 微信上的这些小技巧,你知道多少? 本文将为 ...
微信整人假红包图片_微信假红包图片生成器,假红包生成器微信(玩别人没商量)...
你要记住,无论最后我们疏远成什么样子,一个红包最能回到当初 .这段话在朋友圈很是流行,而且现在大家的聊天方式就是一言不合就发红包,惹女朋友生气了,发个红包就好了,亲朋好友的聊天群里,发个红包就能把潜水 ...
前端方案（时间/图片/PWA/微信公众号/图片前端压缩/动画与过渡/新兴方案/屏幕适配）
时间时间戳(毫秒数)不分时区,即UTC时间所累积的毫秒数,UI必须获得时间戳或者UTC时间的字符串才能正确显示浏览器本地时间. 方案1.后台数据库存放本地时间,返回时间戳给UI. 后台数据库存放本地 ...
java 下载微信图片_java 微信服务器下载图片到自己服务器
/** * @author why * */public class PicDownload {/** * * 根据文件id下载文件 * * * * @param mediaId * * 媒体id * ...
ios 加载html图片变形,微信开发里面图片变形的问题
先说原因,ios解释border-radius的百分比值(以50%为例)时,是按当前涉及的边的长度为基准,比如一个400x300的长方形, 它的border-radius就被计算成border-rad ...
小程序、h5图片铺满div，自适应容器大小
图片铺满div,自适应容器大小,不会拉伸变形小程序 mode属性 scaleToFill:缩放模式,不保持纵横比,图片拉伸至填满 image 元素 aspectFit: 缩放模式,保持纵横比,保证图 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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