What's a good way to create quasi-3d blocks in CSS?

Question

Here's an example as an image:

I want to style page elements like this using CSS, though. I can't seem to get it to work with border styles. Help appreciated.

Answer 1

You could also do it with two skewed pseudo-elements. Support is the same as for box-shadow: everything except IE8/7 and Opera Mini.

live demo

HTML:

<div class='box'></div>

CSS:

.box {
    position: relative;
    margin: 10em auto 0;
    width: 20em; height: 20em;
    background: dimgrey;
}
.box:before, .box:after {
    position: absolute;
    transform-origin: bottom right;
    content: '';
}
.box:before {
    top: 0; right: 100%; bottom: 0;
    width: 4em;
    background: darkgrey;
    transform: skewY(45deg);
}
.box:after {
    right: 0; bottom: 100%; left: 0;
    height: 4em;
    background: silver;
    transform: skewX(45deg);
}