cssで斜め縞(diagonal-stripes)

diagonal-stripes.scss

@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;
}

@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));
}

@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-leftTop {
  $width: 100px;
  $height: 100px;
  $color1: white;
  $color2: black;
  $num: 5;
  @include diagonal-stripes-leftTop($width, $height, $color1, $color2, $num);
}

.diagonal-stripes-rightTop {
  $width: 100px;
  $height: 100px;
  $color1: black;
  $color2: white;
  $num: 5;
  @include diagonal-stripes-rightTop($width, $height, $color1, $color2, $num);
}