<div>
<div class="cube-three">
  <i></i>
  <i></i>
  <i>
    <div></div>
  </i>
</div>
<div class="cube-two">
  <i></i>
  <i></i>
  <i>
    <div></div>
  </i>
</div>
<div class="cube-one">
  <i></i>
  <i></i>
  <i>
    <div></div>
  </i>
</div>
</div>
$blue:       #256BCC;
$darkRed:    #AE1515;
$red:        #D9371E;
$yellow:     #F8CD3D;

html, 
body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: $blue;
}
[class*='cube-'] {
  position: relative;
  margin: 0 auto;
  
  i:nth-child(1), 
	i:nth-child(2), 
	i:nth-child(3) {
  position: absolute;
  
    div {
      transform: skewY(-30deg) scaleY(1.16);
      background: $red;
      height: 100%;
      width: 100%;
    }
  }
  i:nth-child(1) {
    transform: skewY(30deg);
    background-color: $darkRed;      
  }
  i:nth-child(2) {
    transform: skewY(-30deg);
    background-color: $yellow;
  }
  i:nth-child(3) {
    transform: rotate(60deg);
  }
}
.cube-three {
  width: 100px;
  left: -50px;
  top: -25px;
 
  i:nth-child(1), 
	i:nth-child(2), 
	i:nth-child(3){
    width: 100px;
    height: 100px;
  }
  i:nth-child(2) {
    left:100px;
  }
  i:nth-child(3) {
    top: -79px;
    left: 50px;
  }
}
.cube-two {
  width: 75px;
  left: -27px;
  top: -53px;
 
  i:nth-child(1), 
	i:nth-child(2), 
	i:nth-child(3){
    width: 65px;
    height: 65px;
  }
  i:nth-child(1) {
    left:65px;
  }
  i:nth-child(3) {
    top: 51px;
    left: 32px;
  }
}
.cube-one {
  width: 69px;
  top:-12px;
  
  i:nth-child(1), 
	i:nth-child(2), 
	i:nth-child(3) {
    width: 35px;
    height: 35px;
  }
  i:nth-child(2) {
    left:35px;
  }
  i:nth-child(3) {
    top: -28px;
    left: 17px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.