Question

如何创建包含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。

Answer 1

您无法创建非矩形DOM元素。

有几种方法可以破解它。

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

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

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

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

更好的方法可能是为此使用适当的图形库，而不是试图将它变成<div>元素。

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

Answer 2

根据你想要的结果，据我所知你不能制作一个没有Transform:;的三角形DIV但是一个解决方案就是将一个div放在有问题的div里面用PNG切割图像的一半只显示透明部分。不过，不确定这是否适合您。