javascript – 如何为图像创建三角形容器(x-browser)

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

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

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

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

一种更好的方法可能是为此使用适当的图形库,而不是试图将它变成一个< div>.元件.

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

原文地址：https://www.jb51.cc/js/150599.html