CodePen Embed - Cubic Tessellation

<section class="tesselation">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

/* By Epogee Design, a website agency */
/* epogeedesign.com */

.fluid-type(@min-font-size: 12, @max-font-size: 16, @lower-range: 768, @upper-range: 1400) {    
    font-size: calc(~"@{min-font-size}px" + (~"@{max-font-size} - @{min-font-size}") * ( (100vw - ~"@{lower-range}px") / (@upper-range - @lower-range)));
    @media screen and (max-width: ~"@{lower-range}px") { font-size: ~"@{min-font-size}px"; }
    @media screen and (min-width: ~"@{upper-range}px"){ font-size: ~"@{max-font-size}px"; }
}

div {
  width: 100em;
  transform: skewX( 39deg );
  padding-top: 80em;
  position: relative;
  position:absolute;
  background-image: linear-gradient(255deg, #8aa6c9, #738caa);
  box-shadow: inset 0em -3em 21em 1em fade(black,15);
  
  &:before {
    content: '';
    display: block;
    position: absolute;
    padding-top: 80%;
    z-index: 10;
    width: 100%;
    transform: skewX(121.7deg);
    right: 65%;
    background-image: linear-gradient(77deg, #aca8a4, #cfc8c2);
  }
  
  &:after {
    content: '';
    display: block;
    position: absolute;
    padding-top: 80%;
    z-index: 10;
    width: 100%;
    transform: skewX(121.7deg) rotate(180deg) scaleX(1) translateY(100%);
    right: 65%;
    top: 0;
    background-image: linear-gradient(323deg, #aca8a4, #cfc8c2)
  }
  
  &:nth-of-type(2) {
    margin-left: -331em;
      margin-top: 160.9em;
  }
  
  &:nth-of-type(3) {
    margin-left: calc(-331em * 2);
      margin-top: calc(160.9em * 2);
  }
  
  &:nth-of-type(4) {
    margin-left: calc(-331em * 3);
      margin-top: calc(160.9em * 3);
  }
  
  &:nth-of-type(5) {
    margin-left: calc(-331em * 4);
      margin-top: calc(160.9em * 4);
  }
  
  &:nth-of-type(6) {
    margin-left: calc(-331em * -4);
      margin-top: calc(160.9em * 4);
  }
  
  &:nth-of-type(7) {
    margin-left: calc(-331em * -3);
      margin-top: calc(160.9em * 3);
  }
  
  &:nth-of-type(8) {
    margin-left: calc(-331em * -2);
      margin-top: calc(160.9em * 2);
  }
  
  &:nth-of-type(9) {
    margin-left: calc(-331em * -1);
      margin-top: calc(160.9em * 1);
  }
  
  &:nth-of-type(10) {
    margin-left: calc(-331em * -1);
      margin-top: calc(160.9em * -1);
  }
  
  &:nth-of-type(11) {
    margin-left: calc(-331em * 1);
      margin-top: calc(160.9em * -1);
  }
  
  &:nth-of-type(12) {
    margin-left: calc(-331em * 2);
      margin-top: calc(160.9em * -2);
  }
  
  &:nth-of-type(13) {
    margin-left: calc(-331em * 3);
      margin-top: calc(160.9em * -3);
  }
  
  &:nth-of-type(14) {
    margin-left: calc(-331em * 4);
      margin-top: calc(160.9em * -4);
  }
  
  &:nth-of-type(15) {
    margin-left: calc(-331em * 4);
      margin-top: calc(160.9em * -2);
  }
  
  &:nth-of-type(16) {
    margin-left: calc(-331em * 4);
      margin-top: calc(160.9em * 0);
  }
  
  &:nth-of-type(17) {
    margin-left: calc(-331em * -2);
      margin-top: calc(160.9em * 0);
  }
  
  &:nth-of-type(18) {
    margin-left: calc(-331em * -4);
      margin-top: calc(160.9em * 0);
  }
  
  &:nth-of-type(19) {
    margin-left: calc(-331em * -4);
      margin-top: calc(160.9em * -2);
  }
  
  &:nth-of-type(20) {
    margin-left: calc(-331em * -3);
    margin-top: calc(160.9em * 1);
  }
  
  &:nth-of-type(21) {
    margin-left: calc(-331em * -2);
    margin-top: calc(160.9em * -2);
  }
  
  &:nth-of-type(22) {
    margin-left: calc(-331em * -3);
    margin-top: calc(160.9em * -3);
  }
  
  &:nth-of-type(23) {
    margin-left: calc(-331em * -3);
    margin-top: calc(160.9em * -1);
  }
  
  &:nth-of-type(24) {
    margin-left: calc(-331em * 3);
    margin-top: calc(160.9em * -1);
  }
  
  &:nth-of-type(25) {
    margin-left: calc(-331em * 3);
    margin-top: calc(160.9em * 1);
  }
  
  &:nth-of-type(26) {
    margin-left: calc(-331em * 2);
    margin-top: calc(160.9em * 0);
  }
  
  &:nth-of-type(27) {
    margin-left: calc(-331em * 0);
    margin-top: calc(160.9em * -4);
  }
  &:nth-of-type(28) {
    margin-left: calc(-331em * 2);
    margin-top: calc(160.9em * -4);
  }
  
  &:nth-of-type(29) {
    margin-left: calc(-331em * -2);
    margin-top: calc(160.9em * -4);
  }
  
  &:nth-of-type(30) {
    margin-left: calc(-331em * -1);
    margin-top: calc(160.9em * -5);
  }
  
  &:nth-of-type(31) {
    margin-left: calc(-331em * 3);
    margin-top: calc(160.9em * -5);
  }
  
  &:nth-of-type(32) {
    margin-left: calc(-331em * 1);
    margin-top: calc(160.9em * -5);
  }
  
  &:nth-of-type(33) {
    margin-left: calc(-331em * 1);
    margin-top: calc(160.9em * -3);
  }
  
  &:nth-of-type(34) {
    margin-left: calc(-331em * -1);
    margin-top: calc(160.9em * -3);
  }
  
  &:nth-of-type(35) {
    margin-left: calc(-331em * 0);
    margin-top: calc(160.9em * -2);
  }
  
  &:nth-of-type(36) {
    margin-left: calc(-331em * 0);
    margin-top: calc(160.9em * 2);
  }
  
  &:nth-of-type(37) {
    margin-left: calc(-331em * -1);
    margin-top: calc(160.9em * 3);
  }
  
  &:nth-of-type(38) {
    margin-left: calc(-331em * 1);
    margin-top: calc(160.9em * 3);
  }
  
  &:nth-of-type(39) {
    margin-left: calc(-331em * 1);
    margin-top: calc(160.9em * 5);
  }
  
  &:nth-of-type(40) {
    margin-left: calc(-331em * -1);
    margin-top: calc(160.9em * 5);
  }
  
  &:nth-of-type(41) {
    margin-left: calc(-331em * 2);
    margin-top: calc(160.9em * 4);
  }
  
  &:nth-of-type(42) {
    margin-left: calc(-331em * -2);
    margin-top: calc(160.9em * 4);
  }
  
  &:nth-of-type(43) {
    margin-left: calc(-331em * 0);
    margin-top: calc(160.9em * 4);
  }
  
  &:nth-of-type(44) {
    margin-left: calc(-331em * -3);
    margin-top: calc(160.9em * 5);
  }
  
  &:nth-of-type(45) {
    margin-left: calc(-331em * -4);
    margin-top: calc(160.9em * 2);
  }
  
  &:nth-of-type(46) {
    margin-left: calc(-331em * -4);
    margin-top: calc(160.9em * -4);
  }
  
  &:nth-of-type(47) {
    margin-left: calc(-331em * -3);
    margin-top: calc(160.9em * -5);
  }
  
  &:nth-of-type(48) {
    margin-left: calc(-331em * 3);
    margin-top: calc(160.9em * 5);
  }
  
  &:nth-of-type(49) {
    margin-left: calc(-331em * 4);
    margin-top: calc(160.9em * 2);
  }
}

body, html {
  height:100%;
  min-height:100%;
  overflow:hidden;
  margin:0;
  padding:0;
  background:black;
}

section {
  .fluid-type(0.5,1);
  width:100%;
  height:100%;
  position:absolute;
  max-width:1490em;
  max-height:880em;
  overflow:Hidden;
  margin:0 auto;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(11deg, #394a5f, #3d4a59);
  display: grid;
  align-items: center;
  justify-items: center;
}

View Compiled

This Pen is owned by Epogee Design on CodePen.

See more by @epogeedesign on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.