<div class="angledStripe"></div>

<div class="horizontalStripe"></div>

<div class="circleStripe"></div>

//stripe background mixin
@mixin stripeBg($type: 45, $color1: #fff, $color2: #000, $size: 10) {
  @if not(unitless($size)) {
    $_nounit_divisor: (floor($size) * 2) % 2 + 1;
    $size: ($size / $_nounit_divisor);
  }
  @if type_of($type) == string {
    background: repeating-radial-gradient(
      $type,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
  @else if (type_of($type) == number) {
    @if not(unitless($type)) {
      $_nounit_divisor: (floor($type) * 2) % 2 + 1;
      $type: ($type / $_nounit_divisor);
    }
    background: repeating-linear-gradient(
      $type + deg,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
  @else if (type_of($type) == list) {
    background: repeating-linear-gradient(
      $type,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
}

.angledStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg;
}

.horizontalStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(0, #E67E22, #D35400, 5);
}

.circleStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(circle, #2ECC71, #27AE60, 20);
}