Create complex forms using CSS

Question

I am trying to create a trapezoid-like shape using any number of techniques so that it is as possible as possible. The form I'm trying to create is this form:

(inside the form will be the contents of [imgs and txt])
There are still possible ways to do this: masking (webkit) and SVG effects on html content (firefox). but I cannot find a way to make this work with IE and opera. Therefore, if anyone can show me how to do this, we will be very grateful.

Answer 1

There are several options for creating non-rectangular shapes using CSS, but they are all hacks. This is not what you usually expect to do with CSS.

The most famous method is triangles created using borders. This is a very hack and requires the use of several elements for one shape. I would not suggest using it on a production site.

Another CSS solution I can think of would be to use the extreme border-radius parameter to resize the window. This is less dangerous, but does not work in IE8 and lower, so the criteria cannot be met.

You say you tried the SVG approach and abandoned it because it doesn't work in IE8. It is worth noting that although IE does not support SVG, it does support VML, which is a competing vector graphics format. SVG is now standardized, so VML will fade, but older IEs will continue to support it.

So the solution I would handle with you is to use SVG by default, and VML instead of IE7 / 8. The good news is that there are several Javascript solutions that make this easy.

One Raphael that allows you to draw SVG / VML images using Javascript. Commonly used for real time charts, etc.

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

Hope this helps.

Answer 2

Do you think masking and SVG are the way to go. They will be supported in future browsers. If you need to be backward compatible with IE, look in the IE "filter" for CSS (google "ie filter").

Be warned: it is very unintuitive (compared to CSS3) and generally a bitch to work with. If your goal is to make the page look like a CSS3 version, it will be difficult, and you are probably better off using images.