JS：图像左侧和右侧的弯曲高度

Question

我正试图找到一个帮助我的图书馆（或其他方式...）

我这里最初有这张图片：

但我想让用户像这样改变（裁剪/弯曲）左侧图像....

并在右侧像这样

并在右侧像这样：

我已经在这里检查了这些文章：

How to bend/curve a image in html5 canvas

HTML5 Canvas: curve image along the path

这是一个工具，用户可以选择他将在稍后订购的刷子的尺寸......因此，刷子左侧和右侧的锥形尺寸应该是可能的

我不知道，也许我必须使用画布对象，但也许我可以编程找到一个解决方案来改变一些CSS样式来裁剪图像或缩小图像（但我认为缩小/弯曲图像看起来真的很棒好）

感谢任何帮助或提示！

问候

亚历

修改：

通过这样做，我发现可能有一个改变裁剪坐标：

-webkit-clip-path: polygon(100% 0, 100% 100%, 0% 50%);
clip-path: polygon(100% 0, 100% 100%, 0% 50%); 

例如，

给我这样的东西：

EDIT2：

是的，我会给css＆＃34;剪辑＆＃34;试一试

因为这里的事情也应该是可能的

-webkit-clip-path: polygon(17% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%,     16% 99%, 0 46%);
clip-path: polygon(17% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 16% 99%, 0 46%);

Answer 1

所以解决方案真的是剪辑css的事情;）

-webkit-clip-path: polygon(17% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 16% 99%, 0 46%);
clip-path: polygon(17% 0, 70% 0%, 100% 0, 100% 100%, 70% 100%, 16% 99%, 0 46%);