如何为图像创建三角形容器（x浏览器） [英] How would one create a triangle container for an image (x-browser)

问题描述

如何创建包含IMG的DIV，其中DIV将图像切割为三角形，从而通过三角形仅显示部分图像。

How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle.

这样。 。

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

图像是正方形，但包含图像的DIV是三角形。
http://www.script-tutorials.com/creating-kaleidoscope -using-jquery-and-css / 解决这个问题很好，除了这个解决方案不是x浏览器友好的（非ie）。

Where the image is a square, but the DIV containing the image is a triangle. http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ solves this very well except this solution is not x-browser friendly (non-ie).

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

http://css3pie.com/ looks interesting, however this relies on PHP.

推荐答案

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

You can't create a non-rectangular DOM element.

有几种方法可以攻击它。

There are a few ways to hack it.

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

Firstly, there is a method of using CSS borders with varying widths on each side of the element to make it look triangular. It will still be a rectangle, but it will look like a triangle.

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

这种方法的缺点是它限于创建直角三角形。您可以将其中几个联合在一起，以解决这个问题，但是您没有一个容器用于您的图像。

The down-side of this approach is that it is limited to creating right-angled triangles. You can join several of them together to get around this, but then you don't have a single container for your image.

一个替代的方法是以将旋转的元件放置在主元件的顶部，使得它们覆盖图像的适当部分并使其看起来是三角形。这适用于所有浏览器，虽然IE有一些非常讨厌的语法来做旋转，它在浏览器上很沉重，考虑到你只使用它来制作形状。

An alternative hacky way of doing it would be to place rotated elements on top of the main element so that they cover the appropriate parts of the image and make it look triangular. This works in all browsers, although IE does have some very nasty syntax to do rotation, and it's quite heavy on the browser, considering that you'd only be using it to make shapes.

另一个选项可能是使用CSS变换。但是，这只有少数最新的浏览器支持，因此不适用于大多数用户。

Another option might be to use CSS transforms. However this is only supported by a minority of up-to-date browsers, so it won't work for most users.

更好的方法可能是使用正确的图形库为此，而不是试图把它变成一个< div> 元素。

A better approach might be to use a proper graphics library for this, rather than trying to shoe-horn it into a <div> element.

建议您使用 Raphael 。它是一个Javascript库，可以直接绘制到浏览器使用SVG（或VML为IE）。使用它创建三角形并用图形填充三角形很简单。请参阅Raphael首页上的示例，了解如何开始使用。

I'd recommend using Raphael. It's a Javascript library which can draw directly into the browser using SVG (or VML for IE). It's trivial to create triangles using it and to fill them with a graphic. See the examples on the Raphael home page to get you started.

这篇关于如何为图像创建三角形容器（x浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！