CSS3: Cube with shadow - html

Question

I think images speak louder than words in this case.
I want to get this effect:
But the best I can do with CSS3 is this:
And the code for this is absolutely terrible:
box-shadow: 1px 1px hsl(0, 0%, 27%),
2px 2px hsl(0, 0%, 27%),
3px 3px hsl(0, 0%, 27%),
4px 4px hsl(0, 0%, 27%),
5px 5px hsl(0, 0%, 27%),
6px 6px hsl(0, 0%, 27%),
7px 7px hsl(0, 0%, 27%),
8px 8px hsl(0, 0%, 27%),
...
Is there any way that I can create an effect like this with pure CSS3? I don't mind having it be 3D, but isometric would be preferred.
I don't need to place content onto the sides of the box, just onto the front face, so I'm working with just a single <div> element.
Here's what I have so far: http://jsfiddle.net/X7xSf/3/
Any help would be appreciated!

Answer 1

I'd use some skew transforms on some CSS generated elements... Take a look at this:
http://jsfiddle.net/X7xSf/12/
If I wanted to use this in production, I'd probably identify which browsers support before and after, but not transforms (only IE8), then use Paul Irish's method from 2008 (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) to turn this off for IE8.

Answer 2

Well... My idea was to use border hacks and some masking to get it to work in... IE 8 at least? But I can't figure out how to get the border to animate backwards Fixed it.
You can see my idea here: http://jsfiddle.net/k2AdU/1
and the code concept is to use :before and :after to create a mask for the corners
.cube
{
width:100px;
height:100px;
background:#454545;
position:relative;
border-right:20px solid #333;
border-bottom:20px solid #111;
border-right-width:0px;
border-bottom-width:0px;
left:20px;
top:20px;
}
.cube:after
{
content:"";
display:block;
position:absolute;
left:0px;
top:100%;
border:10px solid transparent;
border-left:10px solid white;
border-bottom:10px solid white;
}
.cube:before
{
content:"";
display:block;
position:absolute;
top:0px;
left:100%;
border:10px solid transparent;
border-top:10px solid white;
border-right:10px solid white;
}