<div class="row">
<div class="poly poly-1-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-1"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-1"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-2"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-2"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-3"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-3"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-4"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-4"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-5"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-5"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-6"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-6"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-7"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-7"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>
<div class="row">
<div class="poly poly-1-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-2-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-3-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-4-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-5-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-6-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-7-8"><div class="polyTL"></div><div class="polyBR"></div></div>
<div class="poly poly-8-8"><div class="polyTL"></div><div class="polyBR"></div></div>
</div>

<div class="headline">ClipPath</div>
body {
  margin:0;
  padding:0;
  background-color:black;
}

.headline {
  pointer-events:none;
  color: rgba(255,255,255,0.6);
  position: fixed;
  top:50%;
  transform: translateY(-50%);
  width:100%;
  text-align:center;
  
  font-family: 'Helvetica Neue', 'Helvetica', 'Roboto', Arial, sans-serif;
  font-size: 10vw;
  font-weight: 600;
  
}

// clippath grid

@mixin pseudo() {
   display:block;
    width:100%;
    height:100%;
    content:'';
    position:absolute;
}


@mixin PolyQuad($x, $y, $base_tone: deeppink) {
  $t: lighten($base_tone,20%), lighten($base_tone, 36%);
  $l: lighten($base_tone,16%), lighten($base_tone, 30%);
  $b: lighten($base_tone,10%), lighten($base_tone, 20%);
  $r: lighten($base_tone,10%), lighten($base_tone, 30%);
  
  
  .polyTL {
    background-color: $base_tone;
    pointer-events:none;
    &:before {
      background: linear-gradient(180deg, $t);
      background-size: 100% $y;
      -webkit-clip-path: polygon(100% 0 , 0 0, $x $y);
      clip-path: polygon(100% 0 , 0 0, $x $y);
    }
    &:after {
     background: linear-gradient(90deg, $l);
     background-size: $x 100%;
     -webkit-clip-path: polygon(0 0 , 0% 100%, $x $y);
     clip-path: polygon(0 0 , 0% 100%, $x $y);
    }
  }

.polyBR {
  pointer-events:none;
  -webkit-transform: rotate(180deg);
  
  &:before {
    background: linear-gradient(180deg, $b);
    background-size: 100% 100-$y;
    -webkit-clip-path: polygon(100% 0 , 0 0, 100-$x 100-$y);
    clip-path: polygon(100% 0 , 0 0, 100-$x 100-$y);
  }
  
  &:after {
   background: linear-gradient(90deg, $r);
   background-size: 100%-$x 100%;
   -webkit-clip-path: polygon(0 0 , 0% 100%, 100%-$x 100%-$y);
   clip-path: polygon(0 0 , 0% 100%, 100%-$x 100%-$y);
  }
}
}

.poly {
  width:100%;
  height: 160px;
  position:relative;
  
  .polyTL,
  .polyBR {
    position: absolute;
    width:100%;
    height:100%;
    &:after,
    &:before {
      background-repeat:no-repeat;
      transition: all 0.2s ease;
      @include pseudo();
    }
  }
}

.row {
  display:flex;
  justify-content:center;
}

@for $yc from 1 through 8 {
  $ycenter: (100 / 10) * $yc * 1% ;
  $aoffset: 255 / 9 * $yc;
  
  @for $xc from 1 through 8 {
    $xcenter: (100 / 9) * $xc * 1% ;
    $boffset: 255 / 9 * $xc;
    
    $cellColor:rgb($aoffset,10,$boffset);
    
    .poly-#{$xc}-#{$yc} { 
       @include PolyQuad($xcenter, $ycenter, $cellColor);
      &:hover {
       @include PolyQuad(50%, 50%, lighten($cellColor,3%));
      }
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.