CodePen Embed - 1. Cube unit with SVG shapes and transforms

<svg viewBox="-130 -20 300 100">
  <g id="cube" class="cube-unit">
    <rect width="21" height="24" fill="#00affa" stroke="#0079ad" transform="skewY(30)"/>
    <rect width="21" height="24" fill="#008bc7" stroke="#0079ad" transform="skewY(-30) translate(21 24.3)"/>
    <rect width="21" height="21" fill="#009CDE" stroke="#0079ad" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
  </g>
</svg>

.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit: 0;
}

This Pen is owned by Mariana Beldi on CodePen.

See more by @marianab on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.