CSS Cube

Generating a 2D cube using CSS and one HTML element.

by aardrian

HTML

<div id="cube"></div>

CSS

#cube {
   padding: 0;
   border: 4px solid #000;
   width: 95px;
   height: 110px;
   margin: 110px 0 0 100px;
   background-color: #f00;
   -webkit-transform: skew(0, -30deg);
   -moz-transform: skew(0, -30deg);
   -ms-transform: skew(0, -30deg);
   -o-transform: skew(0, -30deg);
   transform: skew(0, -30deg);
}

#cube:before, #cube:after {
   content: "";
   position: absolute;
   margin: 0;
   padding: 0;
   border: 4px solid #000;
   left: -103px;
   top: -61px;
   width: 95px;
   height: 110px;
   background-color: #f00;
}

#cube:before {
   -webkit-transform: skew(0, 49deg);
   -moz-transform: skew(0, 49deg);
   -ms-transform: skew(0, 49deg);
   -o-transform: skew(0, 49deg);
   transform: skew(0, 49deg);
}

#cube:after {
   top: -119px;
   left: -53px;
   width: 94px;
   -webkit-transform: skew(41deg, 0);
   -moz-transform: skew(41deg, 0);
   -ms-transform: skew(41deg, 0);
   -o-transform: skew(41deg, 0);
   transform: skew(41deg, 0);
}