Is there a way to create a software box's background shadow using CSS?

Question

Imagine a software box like the following:

_{(source: sitellite.org)}

Now imagine the shadow is not there. Is there a CSS way that I can simulate that background shadow, and work on at least Firefox and Chrome, if not also IE9 and up?

Answer 1

One way would be to start with a triangle shape like this

<div id="triangle"></div>

#triangle {
    width: 0;
    height: 0;
    border-top: 100px solid grey;
    border-left: 100px solid transparent;
    opacity:0.1;
}​

see example

Then add a linear-gradient and position it behind the image. Take a look at this gradient generator as a starting point.

Then you could use transform to skew it slightly.