Generated by SassMeister.com.

responsive-angled-block.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// screen breakpoints can be sourced from the framework you are using
// in my case it is bootstrap
$screen-xs-max: 670px;
$screen-sm-max: 980px;
$screen-md-max: 1200px;

$mobile-max: $screen-xs-max;
$tablet-max: $screen-sm-max;
$laptop-max: $screen-md-max;

@function unit($val, $unit) {
  @return $val * 1#{$unit};
}

@mixin mobile {
  @media screen and (max-width: $mobile-max) {
    @content;
  }
}
  
@mixin tablet {
  @media screen and (min-width: $mobile-max + 1) and (max-width: $tablet-max) {
    @content;
  }
}

@mixin laptop {
  @media screen and (min-width: $tablet-max + 1) and (max-width: $laptop-max) {
    @content;
  }
}

@mixin computer {
  @media screen and (min-width: $laptop-max + 1) {
    @content;
  }
}

// Build on top of mixin create by Jeremy Frank
// https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms/
// Possible values for $pseudo are: before, after, both
@mixin jeremy-angle($pseudo, $flip, $angle) {
  $unit: rad;
  @if $pseudo == 'before' or $pseudo == 'after' or $pseudo == 'both' {
    position: relative;
    z-index: 0;
    $selector: if($pseudo == 'both', '&:before,&:after', '&:#{$pseudo}');

    #{$selector} {
      background: inherit;
      content: '';
      display: block;
      height: 50%;
      left: 0;
      position: absolute;
      right: 0;
      z-index: -1;
      -webkit-backface-visibility: hidden; // for Chrome Windows
    }

    @if $pseudo == 'before' {
      #{$selector} {
        top: 0;

        @if $flip {
          transform: skewY(unit($angle * -1, $unit));
          transform-origin: 0 0;
        } @else {
          transform: skewY(unit($angle, $unit));
          transform-origin: 100% 0;
        }
      }
    }

    @if $pseudo == 'after' {
      #{$selector} {
        bottom: 0;

        @if $flip {
          transform: skewY(unit($angle, $unit));
          transform-origin: 0 100%;
        } @else {
          transform: skewY(unit($angle * -1, $unit));
          transform-origin: 100%;
        }
      }
    }

    @if $pseudo == 'both' {
      &:before {
        top: 0;

        @if $flip {
          transform: skewY($angle * -1);
          transform-origin: 0 0;
        } @else {
          transform: skewY($angle);
          transform-origin: 100% 0;
        }
      }

      &:after {
        bottom: 0;

        @if $flip {
          transform: skewY($angle);
          transform-origin: 0 0;
        } @else {
          transform: skewY($angle * -1);
          transform-origin: 100%;
        }
      }
    }
  }
}

// modified the mixin to accomodate responsive behaviour.

// Usage Instructions:
// edg(r)-(M|T|L|C)-(y|t|b)-(sm|md|lg)
// To have angled edge (edge that goes up) on a block:
// At bottom: edg-b-sm
// At bottom reverse: edgr-b-sm
// At Top: edg-t-sm
// Large angle on topa and bottom: edg-y-lg
// On mobile bottom: edg-M-b-sm
// On mobile top reverse: edgr-M-t-sm
//

// params
$angle-options: sm 0.05, md 0.075, lg 0.1;
$pseudo-options: y both, t before, b after;
@mixin make-angled-block-mixin($breakpoint: all, $j: length($pseudo-options), $i: length($angle-options)) {
  $infix: '';
  @if $breakpoint != "all" {
    $infix: '-#{$breakpoint}';
  }

  @while $i > 0 {
    $angle-option: nth($angle-options, $i);
    
    $j: length($pseudo-options);
    @while $j > 0 {
      $pseudo-option: nth($pseudo-options, $j);
      .edg#{$infix}-#{nth($pseudo-option,1)}-#{nth($angle-option,1)} { 
        @include jeremy-angle(#{nth($pseudo-option,2)},false,nth($angle-option,2))
      }
      // flip the angle
      .edgr#{$infix}-#{nth($pseudo-option,1)}-#{nth($angle-option,1)} { 
        @include jeremy-angle(#{nth($pseudo-option,2)},true,nth($angle-option,2))
      }
      
      // reduce counter
      $j: $j - 1;
    }
    
    // reduce counter
    $i: $i - 1;
  }
}


// Use the mixin for each breakpoint
@include make-angled-block-mixin();
@include mobile { @include make-angled-block-mixin(M); }
@include tablet { @include make-angled-block-mixin(T); }
@include laptop { @include make-angled-block-mixin(L); }
@include computer { @include make-angled-block-mixin(C); }