<!-- vertical-strips -->
<div class="wrapper">
  <div class="linear-grad"></div>
</div>
<div class="wrapper">
  <div class="vertical-stripes-test"></div>
</div>

<div class="wrapper">  
  <div class="vertical-stripes-default">
    vertical-stripes-default
  </div>
  
  <div class="vertical-stripes-red-green">
    vertical-stripes-red-green
  </div>
</div>

<!-- horizontal-strips -->
<div class="wrapper">
  <div class="horizontal-stripes-default">
    horizontal-stripes-default
  </div>
  <div class="horizontal-stripes-green-blue">
    horizontal-stripes-green-blue
  </div>
</div>

<!-- diagonal-stripes -->
<!-- diagonal-stripes-leftTop -->
<div class="wrapper">
  <div class="linear-gradient-left-top2">
  </div>
  <div class="linear-gradient-left-top4">
  </div>
</div>

<div class="wrapper">
  <div class="diagonal-stripes_test1">
  </div>
  <div class="diagonal-stripes_test2">
  </div>
</div>

<div class="wrapper">
  <div class="diagonal-stripes-leftTop-default">
    diagonal-stripes-left-top-
  </div>
  <div class="diagonal-stripes-leftTop-green-blue">
    diagonal-stripes-leftTop-green-blue
  </div>
</div>

<!-- diagonal-stripes-rightTop -->
<div class="wrapper">
  <div class="diagonal-stripes-rightTop-blue-red">
    diagonal-stripes-rightTop-blue-red
  </div>
</div>
@mixin background-linear-gradient($value...){
  background: -moz-linear-gradient($value); 
  background: -webkit-linear-gradient($value);
  background: linear-gradient($value);
}

@mixin background-size($value...){
  -moz-background-size: $value;
  -webkit-background-size: $value;
  background-size: $value;
}

////////////////////////////////////////

.wrapper {
  margin-bottom: 3rem;
}

.wrapper * {
  display: inline-block;
  margin-right: 3rem;
}

/////////////////////////////////////////////

.linear-grad {
  width: 100px;
  height: 100px;
  @include background-linear-gradient(
    left, hsl(0, 80%, 80%), hsl(0, 80%, 80%) 50%,
    hsl(50, 80%, 80%) 50%, hsl(50, 80%, 80%));
}

.vertical-stripes-test{
  width: 100px;
  height: 100px;
  @include background-linear-gradient(
    left, hsl(0, 80%, 80%), hsl(0, 80%, 80%) 50%,
    hsl(50, 80%, 80%) 50%, hsl(50, 80%, 80%));
  @include background-size(50px 50px);
}

@mixin vertical-stripes($width: 100px, $height: 100px, $color1: black, $color2: white, $sima_num: 5){
  width: $width;
  height: $height;
  @include background-linear-gradient(left, $color1, $color1 50%, $color2 50%, $color2);
  @include background-size($width / $sima_num $height);
}

.vertical-stripes-default {
  @include vertical-stripes();
}

.vertical-stripes-red-green {
  $width: 150px;
  $height: 100px;
  $color1: hsl(0, 80%, 70%);
  $color2: hsl(120, 80%, 70%);
  $num: 3;
  @include vertical-stripes($width, $height, $color1, $color2, $num);
}

///////////////////////////////////////////////

@mixin horizontal-stripes($width: 100px, $height: 100px, $color1: black, $color2: white, $sima_num: 5){
  width: $width;
  height: $height;
  @include background-linear-gradient(top, $color1, $color1 50%, $color2 50%, $color2);
  @include background-size($width $height/ $sima_num);
}

.horizontal-stripes-default {
  @include horizontal-stripes();
}

.horizontal-stripes-green-blue {
  $width: 150px;
  $height: 100px;
  $color1: hsl(120, 85%, 60%);
  $color2: hsl(240, 85%, 60%);
  $num: 6;
  @include horizontal-stripes($width, $height, $color1, $color2, $num);
}

///////////////////////////////////////////////

.linear-gradient-left-top2 {
  width: 100px;
  height: 100px;
  @include background-linear-gradient(
    left top,
    hsl(90, 70%, 70%), 
    hsl(90, 70%, 70%) 50%, 
    hsl(180, 70%, 70%) 50%,  
    hsl(180, 70%, 70%));
  }

.linear-gradient-left-top4{
  width: 100px;
  height: 100px;
  @include background-linear-gradient(
    left top, 
    hsl(90, 70%, 70%), hsl(90, 70%, 70%) 25%, 
    hsl(180, 70%, 70%) 25%, hsl(180, 70%, 70%) 50%,
    hsl(90, 70%, 70%) 50%, hsl(90, 70%, 70%) 75%, 
    hsl(180, 70%, 70%) 75%,hsl(180, 70%, 70%));
  }

.diagonal-stripes_test1 {
  width: 100px;
  height: 100px;
  @include background-linear-gradient(
    left top,
    hsl(90, 70%, 70%), 
    hsl(90, 70%, 70%) 50%, 
    hsl(180, 70%, 70%) 50%,  
    hsl(180, 70%, 70%));
  @include background-size(20px 20px);
 }

.diagonal-stripes_test2{
  width: 100px;
  height: 100px;
  @include background-linear-gradient(
    left top, 
    hsl(90, 60%, 60%), hsl(90, 60%, 60%) 25%, 
    hsl(180, 60%, 60%) 25%, hsl(180, 60%, 60%) 50%,
    hsl(90, 60%, 60%) 50%, hsl(90, 60%, 60%) 75%, 
    hsl(180, 60%, 60%) 75%,hsl(180, 60%, 60%));
  @include background-size(20px 20px);
}

@mixin diagonal-stripes-leftTop($width: 100px, $height: 100px, $color1: black, $color2: white, $sima_num: 5){
  width: $width;
  height: $height;
  
  @include background-linear-gradient(
    left top, 
    $color1, $color1 25%, 
    $color2 25%, $color2 50%,
    $color1 50%, $color1 75%, 
    $color2 75%, $color2);
  @include background-size(($width/$sima_num*2) ($height/$sima_num*2));
}

.diagonal-stripes-leftTop-default {
  @include diagonal-stripes-leftTop();
}

.diagonal-stripes-leftTop-green-blue {
  $width: 150px;
  $height: 150px;
  $color1: hsl(60, 85%, 60%);
  $color2: hsl(120, 85%, 60%);
  $num: 3;
  @include diagonal-stripes-leftTop($width, $height, $color1, $color2, $num);
}

//////////////////////////////////////////////////
@mixin diagonal-stripes-rightTop($width: 100px, $height: 100px, $color1: black, $color2: white, $sima_num: 5){
  width: $width;
  height: $height;
  
  @include background-linear-gradient(
    right top, 
    $color1, $color1 25%, 
    $color2 25%, $color2 50%,
    $color1 50%, $color1 75%, 
    $color2 75%, $color2);
  @include background-size(($width/$sima_num*2) ($height/$sima_num*2));
}

.diagonal-stripes-rightTop-blue-red{
  $width: 100px;
  $height: 100px;
  $color1: hsl(240, 60%, 50%);
  $color2: hsl(0, 60%, 50%);
  $num: 3;
  @include diagonal-stripes-rightTop($width, $height, $color1, $color2, $num);
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.