Creating a triangle in css with a gradient background

Question

I am trying to create a triangle in css with a gradient background. I have not had any success as yet. Is there way to do this to bring off this effect seen in the image bel

Answer 1

In CSS3, you can create a triangle with the 'border trick'. This border can be colored and can have a background.

WebKit now (and Chrome 12 at least) supports gradients as border image.

For a more supported solution i suggest you to 'gradient' the background of a :before pseudo element for witch you would apply a 'background-gradient' + the ( css triangle with border ) trick.

Here is a cssTriangle generator for you to experiment.