使用画布从图像中剪切三角形（如带打开文件夹的iOS背景）

Question

我想重新创建iOS文件夹效果。 一切正常，但我需要找到一种更好的方法从上图中剪切三角形并将三角形留在下图像上。

这是一张显示我的意思的图片

我目前正在使用覆盖图像的.png箭头，但我真的希望它是100％逼真的。

您可以在此处查看我目前使用的文件夹效果： http://webkit-os.pixelass.com/iframe

（仅适用于webkit浏览器......在Safari Mac OS X或移动版Safari中最佳）

我找到了这个页面： Cutting irregular shape on image

和这个小提琴一起玩 http://jsfiddle.net/CH6qB/6/

但我设法实现的就是这个。 http://jsfiddle.net/pixelass/rWbNu/

我想我真的不明白画画是如何工作的，我找不到任何以我需要的方式描述它的东西。 所以，如果有人能帮助我，那就太好了。 我也很好地链接到一个很好的教程或画布说明页面。 哦..我真的不知道javascript。 我可以在jQuery中做相当邪恶的东西，所以我会很感激有点jQuery这样做。

我很乐意为你提供任何帮助。 完美的是创造一个简单的小提琴如何工作。 Thx提前

Answer 1

我不确定我是否真的得到了这个问题，但是当你在iPhone上打开某些东西时，你指的是那些小的伪元素指针吗？

如果是这样的话，我就会如何完成这个问题：http://jsfiddle.net/JXgk9/1/

如果没有，请尝试更准确地解释一下您在寻找什么？

Answer 2

解决方案：

对任何对此感兴趣的人。我添加了一个动态位置示例。它还显示了这种方法如何尊重更改壁纸（本例中的cookie支持）。报亭文件夹具有与App-Folders不同的背景。一切都自动发生。

一切都是通过CSS过渡和动画来完成的。 jQuery仅用于更改属性和类。我仍然不是很开心，但剩下的只是微调。

这是Webkit浏览器的演示：http://webkit-os.pixelass.com/foldertest/

如果有人关心这个，请告诉我，我会将演示作为.ZIP上传。