Question

I’m trying to create a trapeze like shape using any number of techinques so that it will be as much as possible. the shape i’m trying to create a shape like this:

(there will be content inside the shape [imgs & txt])
so far, the possible ways of doing that are: masking (webkit) and SVG effects on html content (firefox). but I cant seem to find any way to make this work with IE and opera.
So if anyone could show me how to do this, it will be greatly appreciated.

Answer 1

There are a few options for creating non-rectangular shapes using CSS, but they are all hacks. This isn’t something that you’d normally expect to do using CSS.

The most well known technique is triangles made using borders. It is very much a hack, and would require using multiple elements for a single shape. I wouldn’t suggest using it on a production site.

The other CSS solution I can think of would be to use an extreme border-radius setting to modify the shape of the box. This is less hacky, but won’t work in IE8 and lower, so fails your criteria.

You say you’ve tried the SVG approach and given up on it because it doesn’t work in IE8. It’s worth pointing out that while IE doesn’t support SVG, it does support VML, which is a competing vector graphics format. SVG is now standardised, so VML will fade away, but older IEs will continue to support it.

Therefore the solution I’d go with would be to use SVG by default, and VML instead on IE7/8. The good news is that there are several Javascript solutions which make this easy.

One is Raphael, which allows you to draw SVG/VML images using Javascript. Commonly used for real-time graphs, etc.

There are also a number of solutions which simply convert SVG to VML. For example http://code.google.com/p/svg2vml/. But there are several others available.

Hope that helps.