v.plonk!

Curious how it is done?
In fact the idea isn't all that new and to be honest I've seen far better things based on this idea, but maybe a few haven't seen it, so here we go:

Some basics about borders
To understand the final steps we take a short look at borders. Usually you have an element you put a border around. You can use the parameters border-color and border-bottom-color (or top, left, right) to style every side of a border. So if you tell all borders but one to be transparent your browser will show just 1 side of the border. See step 1 in the picture to the right.

Furthermore you can define the element to have no width or height, resulting in a triangle. The last basic thing to know about borders is, that by defining the parameter border-width for each edge you can change the angles of the border edges, like shown in step 2.

Creating a triangle
Now that you know the basics we can take it a step further: We create a triangle as a part of our cube, by combining the parameters and defining the border-width just like we need it:

width: 0px;
height: 0px;
border-width: 0px 60px 20px 40px;
border-style: solid;
border-color: transparent;
border-bottom-color: #FA8800;

The lower (green) triangle we create just like we did with the orange one. To position the triangle we use position: absolute, top and left, allowing us to position the whole cube just like we want to (see step 3).

The cube
The steps before will result in a plane. If we repeat this we finally will create a whole cube:

<!-- a cube! -->
<div style="position: absolute; left: 10px; top: 40px; width: 0px; height: 0px; border-width: 0px 60px 20px 40px; border-style: solid; border-color: transparent; border-bottom-color: #ddd;"></div>
<div style="position: absolute; left: 10px; top: 60px; width: 0px; height: 0px; border-width: 20px 40px 0px 60px; border-style: solid; border-color: transparent; border-top-color: #ddd;"></div>
<div style="position: absolute; left: 10px; top: 60px; width: 0px; height: 0px; border-width: 20px 0px 40px 60px; border-style: solid; border-color: transparent; border-left-color: #ccc;"></div>
<div style="position: absolute; left: 10px; top: 80px; width: 0px; height: 0px; border-width: 40px 60px 20px 0px; border-style: solid; border-color: transparent; border-right-color: #ccc;"></div>
<div style="position: absolute; left: 70px; top: 60px; width: 0px; height: 0px; border-width: 20px 40px 40px 0px; border-style: solid; border-color: transparent; border-right-color: #bbb;"></div>
<div style="position: absolute; left: 70px; top: 80px; width: 0px; height: 0px; border-width: 40px 0px 20px 40px; border-style: solid; border-color: transparent; border-left-color: #bbb;"></div>

You can even add a "smooth" shadow... yes, it IS a fake, but looks really pretty!

<!-- and a smooth shadow -->
<div style="position: absolute; z-index: -1; left: 10px; top: 110px; width: 0px; height: 0px; border-width: 0px 60px 20px 40px; border-style: solid; border-color: transparent; border-bottom-color: #000; opacity: 0.2;"></div>
<div style="position: absolute; z-index: -1; left: 10px; top: 130px; width: 0px; height: 0px; border-width: 20px 40px 0px 60px; border-style: solid; border-color: transparent; border-top-color: #000; opacity: 0.2;"></div>
<div style="position: absolute; z-index: -1; left: 10px; top: 109px; width: 0px; height: 0px; border-width: 0px 60px 20px 40px; border-style: solid; border-color: transparent; border-bottom-color: #000; opacity: 0.2;"></div>
<div style="position: absolute; z-index: -1; left: 10px; top: 129px; width: 0px; height: 0px; border-width: 20px 40px 0px 60px; border-style: solid; border-color: transparent; border-top-color: #000; opacity: 0.2;"></div>
<div style="position: absolute; z-index: -1; left: 10px; top: 108px; width: 0px; height: 0px; border-width: 0px 60px 20px 40px; border-style: solid; border-color: transparent; border-bottom-color: #000; opacity: 0.2;"></div>
<div style="position: absolute; z-index: -1; left: 10px; top: 128px; width: 0px; height: 0px; border-width: 20px 40px 0px 60px; border-style: solid; border-color: transparent; border-top-color: #000; opacity: 0.2;"></div>

No magic, just simple borders.
If I should ever find that demo again, where someone actually created a rotating cube using this technique, I'll post it here.