如何在 CSS 或 jquery 中以三角形形状的图像制作剪贴蒙版？

【问题标题】：How can I make a clipping mask on an image in shape of a triangle in CSS or jquery?如何在 CSS 或 jquery 中以三角形形状的图像制作剪贴蒙版？
【发布时间】：2011-11-13 04:04:03
【问题描述】：

剪贴蒙版必须是三角形朝下的形状，并且只显示右侧部分。三角形蒙版的左侧部分并不重要。我该怎么做？

【问题讨论】：

标签： jquery css svg raphael vml

【解决方案1】：

对于 Webkit，您可以通过 CSS 使用 clipping mask。但是，这不适用于Firefox or IE or Opera。

对于现代浏览器，您可以使用带有clipping path 的SVG。这是clipping an image in SVG 的示例。

【讨论】：

好吧，似乎 raphael.js 完成了这项工作。但遗憾的是，我无法在 VML 中移动填充图像，因为我会移动带有背景位置的背景图像。但剪裁是完美的。