OneAndOneIs2

This post relies on Mozilla transforms to make any sense, so if you're not using Firefox, it'll probably just look weird. Sorry!

Innit clever? :o)

Click below to see how it's done. Click here for a much cooler example.

Follow up:

<style type="text/css">
.cube {
    position: absolute;
}
 
.face {
    position: absolute;
    width: 200px;
    height: 200px;
}
.cubetop {
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
background-color: #eee;
left: 200px;
}
 
.cubeleft {
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
background-color: #aaa;
top: 156px;
left: 110px;
}
 
.cuberight {
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
top: 157px;
left: 290px;
}
</style>
<div class="cube">
    <div class="face cubetop">This is an isometric cube that is generated entirely by using CSS - you'll notice that the text is actually text, that can be highlighted and copied just like normal text.
    </div>
    <div class="face cubeleft">The cube is made up of three divs, each of which have been rotated and skewed to fit into an isometric cube layout.
    </div>
    <div class="face cuberight">Absolute positioning of the divs is necessary to make this cube fit together properly.
    </div>
</div>