如何为图像(x浏览器)创建三角形容器

|| 我将如何创建包含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边框的方法,该CSS边框在元素的每一侧具有不同的宽度,以使其看起来呈三角形。它仍然是矩形,但看起来像三角形。 这里有一个教程:http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/ 这种方法的缺点是仅限于创建直角三角形。您可以将其中的几个合并在一起以解决此问题,但是那样您就没有图像的单个容器。 另一种怪异的做法是将旋转后的元素放置在主元素上,以便它们覆盖图像的适当部分并使它看起来呈三角形。尽管IE确实有一些非常讨厌的语法来进行旋转,但它在所有浏览器中均有效,并且考虑到您仅会使用它来制作形状,因此IE在浏览器上非常繁琐。 另一个选择可能是使用CSS转换。但是,只有少数最新的浏览器支持此功能,因此它不适用于大多数用户。 更好的方法可能是为此使用适当的图形库,而不是尝试将其变成
<div>
元素。 我建议使用Raphael。它是一个Javascript库,可以使用SVG(或IE的VML)直接绘制到浏览器中。使用它创建三角形并用图形填充它们很简单。请参阅Raphael主页上的示例以开始使用。     
根据您想要的结果,据我所知,如果没有
Transform:;
,您将无法制作三角形DIV。但是,一种解决方案是将div放置在有问题的div内,而PNG切割的图像仅显示一半透明部分穿过。虽然不确定这对您来说是否可行。     

要回复问题请先登录注册