_angled-edges.scss

// $angle: The angle in degrees: 1 - 45
// $angle-position-y: The Y position of the angle: top | bottom | both
// $angle-position-x: The X position of the angle: left | right
// $angle-position-bottom-x: The X position of the bottom angle if using 'both' for $angle-position-y: left | right
// $color: Color of angled edge: Hex color

@mixin angled-edge($angle, $angle-position-y, $angle-position-x, $color: #ffffff, $angle-position-bottom-x: '') {

  position: relative;
  overflow: hidden;

  // Converts degrees to VW, 100vw = 45deg using this technique
  @if $angle < 46 {
    $angle: convertDegToVW($angle);
  }
  @if $angle > 45 {
    $angle: 0;
    @error 'Invalid angle, it must be between 1-45';
  }

  @if $angle-position-bottom-x == '' {
    $angle-position-bottom-x: $angle-position-x;
  }

  $border-width-top: '';
  $border-width-bottom: '';
  $border-color-top: '';
  $border-color-bottom: '';


  @if $angle-position-y == 'top' or $angle-position-y == 'both' {

    @if $angle-position-x == 'left' {
      $border-width-top: #{$angle + 1}vw 100vw 0 0;
    }

    @if $angle-position-x == 'right' {
      $border-width-top: #{$angle + 1}vw 0 0 100vw;
    }

    $border-color-top: $color transparent transparent transparent;
  }


  @if $angle-position-y == 'bottom' or $angle-position-y == 'both' {

    @if $angle-position-y == 'both' and $angle-position-x != $angle-position-bottom-x {
      $angle-position-x: $angle-position-bottom-x;
    }

    @if $angle-position-x == 'left' {
      $border-width-bottom: 0 100vw #{$angle + 1}vw 0;
    }

    @if $angle-position-x == 'right' {
      $border-width-bottom: 0 0 #{$angle + 1}vw 100vw;
    }

    $border-color-bottom: transparent transparent $color transparent;
  }

  @if $angle-position-y == 'top' or $angle-position-y == 'both' {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid;
      top: 0;
      border-width: $border-width-top;
      border-color: $border-color-top;
    }
  }

  @if $angle-position-y == 'bottom' or $angle-position-y == 'both' {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid;
      bottom: 0;
      border-width: $border-width-bottom;
      border-color: $border-color-bottom;
    }
  }
}

// Converts degrees to VW, 100vw = 45deg using this technique
@function convertDegToVW($angle){
  @return $angle*2.22;
}