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

Question

How to create a DIV containing IMG, where the DIV cuts the image into a triangle, thereby displaying only part of the image, although the triangle.

so..

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

If 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 that this solution is not compatible with the x-browser (not that is).

http://css3pie.com/ looks interesting, however it depends on PHP.

Answer 1

You cannot create a non-rectangular DOM element.

There are several ways to hack it.

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

There is a tutorial on this subject: http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

The downside of this approach is that it is limited to creating right triangles. You can join several of them together to get around this, but then you do not have a single container for your image.

An alternative hacker way to do this is to place rotating elements on top of the main element so that they cover the corresponding parts of the image and make it triangular. This works in all browsers, although IE does have a very nasty syntax for rotation, and it is pretty heavy in the browser, given that you will only use it to create shapes.

Another option would be to use CSS transforms. However, this is only supported by a small number of modern browsers, so it will not work for most users.

A better approach might be to use the right graphics library for this, instead of trying to fit it to the <div> element.

I would recommend using Raphael . This is a Javascript library that can be drawn directly in the browser using SVG (or VML for IE). It is trivial to create triangles using it and fill them with graphics. See the examples on Raphael's homepage for you to get started.

Answer 2

Depending on who you want the result to be, as far as I know, you cannot make a DIV triangle without Transform:; . However, one solution would be to have a div located inside the div in question, with a PNG cut of half the image showing only the transparent part. Not sure if this is a useful option for you.