How would one create a triangle container for an image (x-browser)

Question

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.

so..

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

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/ looks interesting, however this relies on PHP.

Answer 1

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

There are a few ways to hack it.

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.

There's a tutorial on this here: 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.

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.

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.

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

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.

Answer 2

Depending on what you want the outcome to be, as far as i'm aware you cant make a triangle DIV without Transform:; However one solution would be having a div positioned inside the div in question with a PNG cutting of half the image showing only the transparent part through. Not sure if this is a viable option for you though.