<!-- nothing -->
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>
$bgcolor: khaki;
$color: darkkhaki;
$transparent: rgba(255, 255, 255, 0);

$deg1: -70deg;
$deg2: 150deg;
$deg3: 30deg;

$color-1: adjust-hue($color, $deg1);
$transparent-1: transparentize($color-1, 1);

$color-2: adjust-hue($color, $deg2);
$transparent-2: transparentize($color-2, 1);

$color-3: adjust-hue($color, $deg3);
$transparent-3: transparentize($color-3, 1);

HTML {
  height: 100%;
  }
BODY {
  background-color: white;
  font: 20px/2 'Trebuchet MS', Verdana, sans-serif;
  }
UL {
  padding: 0;
  list-style-type: none;
  text-align: center;
  }
LI {
  display: inline-block;
  width: 30%;
  height: 10em;
  margin: 0;
  border-radius: 1em;
  }
.item1 {
   background: linear-gradient(to left top,
      $transparent-1 48.9%, 
      $color-1 51%, $color-1 78%, 
      $transparent-1 80%
      ),
    linear-gradient(to left top,
      $color-1 28%,
      $transparent-1 30%
      );
  background-size: 2em 6em;
  background-color: adjust-hue($bgcolor, $deg1) ;
}
.item2 {
   background: linear-gradient(to right top,
      $transparent-2 49.9%, 
      $color-2 52%, $color-2 68%, 
      $transparent-2 70%
      ),
    linear-gradient(to right top,
      $color-2 18%,
      $transparent-2 20%
      );
  background-size: 1em 5em;
  background-color: adjust-hue($bgcolor, $deg2);
}
.item3 {
   background: linear-gradient(to left top,
      $transparent-3 49%, 
      $color-3 52%, $color-3 56%, 
      $transparent-3 60%
      ),
    linear-gradient(to left top,
      $color-3 6%,
      $transparent-3 10%
      );
  background-size: 11em 1em;
  background-color: adjust-hue($bgcolor, $deg3);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.