我将如何创建一个包含 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。
您不能创建非矩形 DOM 元素。
有几种方法可以破解它。
首先，有一种方法可以在元素的每一侧使用不同宽度的 CSS 边框，使其看起来像三角形。它仍然是一个矩形，但看起来像一个三角形。
这里有一个教程：http ://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
这种方法的缺点是它仅限于创建直角三角形。您可以将其中几个连接在一起来解决这个问题，但是您的图像没有一个容器。
另一种 hacky 方法是将旋转的元素放置在主要元素的顶部，以便它们覆盖图像的适当部分并使其看起来是三角形的。这适用于所有浏览器，尽管 IE 确实有一些非常讨厌的语法来进行旋转，而且它在浏览器上相当繁重，考虑到你只会使用它来制作形状。
另一种选择可能是使用 CSS 转换。但是，这仅受少数最新浏览器支持，因此不适用于大多数用户。
更好的方法可能是为此使用适当的图形库，而不是尝试将其硬塞到<div>元素中。
我建议使用Raphael。它是一个 Javascript 库，可以使用 SVG（或 IE 的 VML）直接绘制到浏览器中。使用它创建三角形并用图形填充它们是微不足道的。请参阅 Raphael 主页上的示例以帮助您入门。
根据您想要的结果，据我所知，您无法制作三角形 DIVTransform:;但是一种解决方案是将 div 放置在有问题的 div 内，并用 PNG 切割一半的图像，仅显示透明部分通过。不确定这是否对您来说是一个可行的选择。