<h1>Scroll!</h1>
<div class="zag a"></div>
<div class="zag b"></div>
<div class="zag c"></div>
<div class="zag a"></div>
<div class="zag b"></div>
<div class="zag c"></div>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,800);

$color-1: #FF5254;
$color-2: transparent;
$bg-color: #FCBC53;

body {
  background-color: $bg-color;
}
h1 {
  position: absolute;
  top: 150px;
  left: 50%;
  margin: 0;
  padding: 15px 30px;
  z-index: 1;
  color: #fff;
  font-family: "Open Sans", sans;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 21px;
  transform: translate(-50%, -50%);

  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    content: "";
    width: 130px;
    height: 130px;
    background: #29383d;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}
.zag {
  position: relative;
  height: 150px;
  width: 100%;
  float: left;
  
  &:nth-of-type(n + 4) {
    height: 500px;
  }
  
  &:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.a,
.a:after {
  $a: 21%;
  $b: 29%;
  $size: 100px; // width and height
  background:
    linear-gradient(-45deg, $color-1 5%, $color-2 5%) ($size / 3 * 2) ($size / 2),
    linear-gradient(-135deg, $color-1 5%, $color-2 5%) ($size / 3 * 2) ($size / 2),
    linear-gradient(45deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) ($size / 3 * 2) 0,
    linear-gradient(135deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) ($size / 3 * 2) 0,
    linear-gradient(-45deg, $color-1 5%, $color-2 5%) ($size / 3) ($size / 2),
    linear-gradient(-135deg, $color-1 5%, $color-2 5%) ($size / 3) ($size / 2),
    linear-gradient(45deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) ($size / 3) 0,
    linear-gradient(135deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) ($size / 3) 0,
    linear-gradient(-45deg, $color-1 5%, $color-2 5%) 0 ($size / 2),
    linear-gradient(-135deg, $color-1 5%, $color-2 5%) 0 ($size / 2),
    linear-gradient(45deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) 0 0,
    linear-gradient(135deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) 0 0
  ;	
  background-size: $size $size;
}
.a:after {
  background-attachment: fixed;
}
.b {
  $weight: 15;
  $size: 50px;
  background: 
    linear-gradient(45deg, $color-1 ($weight * 1%), $color-2 ($weight * 1%)),
    linear-gradient(45deg, $color-2 (100% - $weight * 1%), $color-1 (100% - $weight * 1%)),
    linear-gradient(45deg, $color-2 (50% - $weight * 1%), $color-1 (50% - $weight * 1%), $color-1 (50% + $weight * 1%), $color-2 (50% + $weight * 1%))
  ;	
  background-size: $size $size;
  
  &:after {
    $weight: 5;
    background: 
      linear-gradient(45deg, $color-1 ($weight * 1%), $color-2 ($weight * 1%)),
      linear-gradient(45deg, $color-2 (100% - $weight * 1%), $color-1 (100% - $weight * 1%)),
      linear-gradient(45deg, $color-2 (50% - $weight * 1%), $color-1 (50% - $weight * 1%), $color-1 (50% + $weight * 1%), $color-2 (50% + $weight * 1%))
    ;	
    background-size: $size $size;
    background-position: ($size / 2) 0;
    background-attachment: fixed;
  }
}
.c {
  $a: 12%;
  $b: 38%;
  $c: 14%; // triangles
  $size: 50px;
  background: 
    linear-gradient(-45deg, $color-1 $c, $color-2 $c) 0 ($size / 2),
    linear-gradient(-135deg, $color-1 $c, $color-2 $c) 0 ($size / 2),
    linear-gradient(45deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) 0 0,
    linear-gradient(135deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) 0 0
  ;
  background-size: $size $size;
  
  &:after {
    background: 
      linear-gradient(-45deg, $color-1 $c, $color-2 $c) 0 $size,
      linear-gradient(-135deg, $color-1 $c, $color-2 $c) 0 $size,
      linear-gradient(45deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) 0 ($size / 2),
      linear-gradient(135deg, $color-2 $a, $color-1 $a, $color-1 $b, $color-2 $b) 0 ($size / 2)
    ;
    background-size: $size $size;
    background-attachment: fixed;
  }
}
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.