如何为图像创建三角形容器（x 浏览器）答案

【问题标题】：How would one create a triangle container for an image (x-browser)如何为图像创建三角形容器（x 浏览器）
【发布时间】：2015-03-03 20:22:10
【问题描述】：

如何创建一个包含 IMG 的 DIV，其中 DIV 将图像切割成三角形，从而通过三角形仅显示图像的一部分。

所以..

<div>
   <img src='some_image' />
</div>

图像是正方形，但包含图像的 DIV 是三角形。 http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ 很好地解决了这个问题，除了这个解决方案对 x 浏览器不友好（非 ie）。

http://css3pie.com/ 看起来很有趣，但这依赖于 PHP。

【问题讨论】：

CSS3Pie 对您的问题没有任何用处。但是，说它依赖于 PHP 是错误的。它没有。
我也刚刚意识到，它不需要 PHP，我的错误。然而它 CSS3PIE 可以为我将复杂的 CSS3 翻译成 IE 可以理解的东西，它会解决我的问题，但是它似乎不支持变换/矩阵，无论如何，Raphael 看起来是一个非常可行的选择。
您也可以通过此演示查看此答案：stackoverflow.com/questions/7073484/…：codepen.io/web-tiki/pen/ntmDK

【解决方案1】：

您不能创建非矩形 DOM 元素。

有几种方法可以破解它。

首先，有一种方法可以在元素的每一侧使用不同宽度的 CSS 边框，使其看起来像三角形。它仍然是一个矩形，但看起来像一个三角形。

这种方法的缺点是它仅限于创建直角三角形。您可以将其中几个组合在一起来解决这个问题，但是您的图像没有一个容器。

另一种 hacky 方法是将旋转的元素放置在主要元素的顶部，以便它们覆盖图像的适当部分并使其看起来呈三角形。这适用于所有浏览器，尽管 IE 确实有一些非常讨厌的语法来进行旋转，而且它在浏览器上相当繁重，考虑到你只会使用它来制作形状。

另一个选择可能是使用 CSS 转换。但是，这仅受少数最新浏览器支持，因此不适用于大多数用户。

更好的方法可能是为此使用适当的图形库，而不是尝试将其硬塞到 <div> 元素中。

我建议使用Raphael。它是一个 Javascript 库，可以使用 SVG（或 IE 的 VML）直接绘制到浏览器中。使用它创建三角形并用图形填充它们是微不足道的。请参阅 Raphael 主页上的示例以帮助您入门。

【讨论】：

【解决方案2】：

根据您想要的结果，据我所知，如果没有Transform:;，您将无法制作三角形 DIV，但是一种解决方案是将 div 放置在有问题的 div 内，并将 PNG 切割成一半图像仅显示透明部分。不过，不确定这对您来说是否可行。

【讨论】：