我将如何创建包含IMG的DIV,其中DIV将图像切成三 Angular 形,从而仅通过三 Angular 形显示图像的一部分。

所以..

<div>
   <img src='some_image' />
</div>

其中图像是正方形,但包含图像的DIV是三 Angular 形。
http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/很好地解决了这个问题,只是该解决方案不是x浏览器友好的(非IE)。

http://css3pie.com/看起来很有趣,但是这依赖于PHP。

最佳答案

您不能创建非矩形DOM元素。

有几种方法可以破解它。

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

这里有一个教程:http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

这种方法的缺点是仅限于创建直 Angular 三 Angular 形。您可以将其中的几个合并在一起以解决此问题,但是这样您就没有图像的单个容器。

另一种怪异的做法是将旋转后的元素放置在主元素的顶部,以使它们覆盖图像的适当部分并使它看起来呈三 Angular 形。尽管IE确实有一些非常讨厌的语法来进行旋转,但它在所有浏览器中均有效,并且考虑到您仅会使用它来制作形状,因此IE在浏览器上非常繁琐。

另一个选择可能是使用CSS转换。但是,只有少数最新的浏览器支持此功能,因此它不适用于大多数用户。

更好的方法可能是为此使用适当的图形库,而不是尝试将其添加到<div>元素中。

我建议使用Raphael。这是一个Javascript库,可以使用SVG(或IE的VML)直接绘制到浏览器中。使用它创建三 Angular 形并用图形填充它们很简单。请参阅Raphael主页上的示例以开始使用。

09-17 17:16
查看更多