如何创建包含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主页上的示例以帮助您入门.
