.container {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  height: 50vh;
  border: 1px solid;
}

@function pi() {
  @return 3.14159265359;
}

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@mixin ribbon(
  $x: right,
  $y: top,
  $full: false
){
  position: absolute;
  #{$x}: 0;
  #{$y}: 0;
  padding-left: 1.25em;
  padding-right: 1.25em;
  text-align: center;
  
  $origin: bottom right;
  $translateY: 100%;
  $rotate1: 90deg;
  $translateX: cos(45deg) * 100%;
  $rotate2: 45deg;
  
  @if $y == top {
    @if $x == left {
      $origin: bottom left;
      $translateY: $translateY * -1;
      $rotate1: $rotate1 * -1;
      $translateX: $translateX * -1;
    } @else if $x == right {
      $translateY: $translateY * -1;
      $rotate2: $rotate2 * -1;
    }
    
    @if $full {
      padding-top: 100%;
    }
  } @else if $y == bottom {
    @if $x == left {
      $origin: top left;
      $rotate2: $rotate2 * -1;
      $translateX: $translateX * -1;
    } @else if $x == right {
      $origin: top right;
      $rotate1: $rotate1 * -1;
    }
    
    @if $full {
      padding-bottom: 100%;
    }
  }
  
  transform-origin: $origin;
  transform:
    translateY(#{$translateY})
    rotate(#{$rotate1})
    translateX(#{$translateX})
    rotate(#{$rotate2});
}

.ribbon--top-left {
  @include ribbon(
    $x: left,
    $y: top
  );
}

.ribbon--top-right {
  @include ribbon(
    $full: true
  );
}

.ribbon--bottom-right {
  @include ribbon(
    $x: right,
    $y: bottom
  );
}

.ribbon--bottom-left {
  @include ribbon(
    $x: left,
    $y: bottom,
    $full: true
  );
}

.ribbon {
  background-color: #ccc;
}