<div class="demo plain">
      <section>
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section>
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo plain">
      <section class="vertical">
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section class="vertical">
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image above">
      <section>
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section>
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image above">
      <section class="vertical">
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section class="vertical">
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image below">
      <section>
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section>
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image below">
      <section class="vertical">
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section class="vertical">
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

:root {
  --width: 300px;
  --height: 100px;
  --top-color: #f44336;
  --bottom-color: #2196F3;
}

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

@mixin svg ($from, $to, $reverse: false, $height: 100px, $width: 100%) {
  $polygons: '<polygon fill="#{$from}" points="0 100 0 0 100 0"/><polygon fill="#{$to}" points="100 0 100 100 0 100"/>';

  @if $reverse == true {
    $polygons: '<polygon fill="#{$from}" points="0 0 100 0 100 100"/><polygon fill="#{$to}" points="0 0 0 100 100 100"/>';
  }
  
  $svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">#{$polygons}</svg>';

  $svg: str-replace($svg, '#', '%23');
  $svg: str-replace($svg, '<', '%3C');
  $svg: str-replace($svg, '>', '%3E');

  width: var(--width);
  height: var(--height);
  background-image: url('data:image/svg+xml,#{$svg}');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.separator {
  $top-color: #f44336;
  $bottom-color: #2196F3;
  
  @include svg($top-color, $bottom-color);
  
  &.reverse {
    @include svg($top-color, $bottom-color, true);
  }
}

.vertical .separator.reverse {
  $top-color: #f44336;
  $bottom-color: #2196F3;
  @include svg($bottom-color, $top-color, true);
}

.image.above .separator {
  $bottom-color: #2196F3;
  @include svg(transparent, $bottom-color);
  
  &.reverse {
    @include svg(transparent, $bottom-color, true);
  }
}

.image.below .separator {
  $top-color: #f44336;
  @include svg($top-color, transparent);
  
  &.reverse {
    @include svg($top-color, transparent, true);
  }
}

.image.above .vertical .separator {
  $bottom-color: #2196F3;
  @include svg(transparent, $bottom-color);
  
  &.reverse {
    @include svg($bottom-color, transparent, true);
  }
}

.image.below .vertical .separator {
  $top-color: #f44336;
  @include svg($top-color, transparent);
  
  &.reverse {
    @include svg(transparent, $top-color, true);
  }
}