<!-- nothing -->
$bgcolor: #E8DE67;
$transparent: rgba(255, 255, 255, 0);

$color-1: #C0CCAB;
$color-2: #FFEFC3;
$color-3: #E57152;
$color-4: #E8DE67;

$size: 3em;
$big-size: $size*2;

HTML {
  height: 100%;
  }
BODY {
  background: linear-gradient(45deg,
      $color-1 25%,
      $transparent 25%
      ),
    linear-gradient(45deg,
      $color-1 25%,
      $transparent 25%
    ) $size -#{$size},
    
    linear-gradient(-45deg,
      $color-2 25%,
      $transparent 25%
      ),
    linear-gradient(-45deg,
      $color-2 25%,
      $transparent 25%
      ) $size -#{$size},
    
    linear-gradient(135deg,
      $color-3 25%,
      $transparent 25%
      ),
    linear-gradient(135deg,
      $color-3 25%,
      $transparent 25%
      ) $size -#{$size},
    
    linear-gradient(-135deg,
      $color-4 25%,
      $transparent 25%
      ),
    linear-gradient(-135deg,
      $color-4 25%,
      $transparent 25%
      ) $size -#{$size};
  background-size: $big-size $big-size;
  background-color: $bgcolor;
  font: 10px/2 'Trebuchet MS', Verdana, sans-serif;
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.