pure css zig zag

zig-zag.sass

@mixin zig-zag($width: 10px, $color: black, $position: bottom, $shadow: false)
  $color_gradients: null
  $shadow_gradients: null
  $darken_color: darken($color, 50%)
  $color_gradient1: linear-gradient(45deg, $color 25%, transparent 25%)
  $color_gradient2: linear-gradient(45deg, transparent 75%, $color 75%)
  $shadow_gradient1: linear-gradient(45deg, $darken_color 5%, transparent 35%)
  $shadow_gradient2: linear-gradient(45deg, transparent 65%, $darken_color 95%)
  position: relative
  &:before
    content: " "
    display: block
    position: absolute
    background-size: $width $width !important
    #{$position}: $width - ($width * 2)
    @if $position == 'top' or $position == 'bottom'
      background-repeat: repeat-x
      height: $width
      width: 100%
    @if $position == 'left' or $position == 'right'
      width: $width
      height: 100%
      top: 0
      background-repeat: repeat-y
    @if $position == 'top'
      $color_gradients: $color_gradient1 0 50%, linear-gradient(-45deg, $color 25%, transparent 25%) 0 50%
      $shadow_gradients: $shadow_gradient1 0 50%, linear-gradient(-45deg, $darken_color 5%, transparent 35%) 0 50%
      background-position: left top
    @if $position == 'bottom'
      $color_gradients: $color_gradient2 0 50%, linear-gradient(-45deg, transparent 75%, $color 75%) 0 50%
      $shadow_gradients: $shadow_gradient2 0 50%, linear-gradient(-45deg, transparent 65%, $darken_color 95%) 0 50%
      background-position: left bottom
    @if $position == 'left'
      $color_gradients: $color_gradient2 0 0, linear-gradient(135deg, transparent 75%, $color 75%) 0 0
      $shadow_gradients: $shadow_gradient2 0 0, linear-gradient(135deg, transparent 65%, $darken_color 95%) 0 0
      background-position: left top
    @if $position == 'right'
      $color_gradients: $color_gradient1 0 0, linear-gradient(135deg, $color 25%, transparent 25%) 0 0
      $shadow_gradients: $shadow_gradient1 0 0, linear-gradient(135deg, $darken_color 5%, transparent 35%) 0 0
      background-position: right top
    @if $shadow
      background: $color_gradients, $shadow_gradients
    @else
      background: $color_gradients