Corner shaping mixin using stacked gradients

<nav>

  <a href="#" class="btn corner-1">Corner Scoop</a>
  <a href="#" class="btn corner-2">Corner Bevel</a>
  <a href="#" class="btn corner-3">Corner Notch</a>
</nav>




@mixin corners($shape, $size, $color) {

  $n1: $size+px;
  $n2: ($size)*2+px;
  $n3: $size+1+px;
  $pn: 0%;
  @if ($size <= 10) { $pn: 6%; }
  @elseif ($size <= 15) { $pn: 5%; }
  @elseif ($size <= 20) { $pn: 4%; }
  @elseif ($size <= 40) { $pn: 3%; }
  @elseif ($size <= 50) { $pn: 2%; }
  @elseif ($size <= 60) { $pn: 1%; }
  $pd-scoop: 64%+$pn;
  
  @if ($shape == "bevel") {
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left,
          linear-gradient(135deg,  transparent 49%, $color 50% ) no-repeat top left,
          linear-gradient(-135deg, transparent 47%, $color 48% ) no-repeat top right,
          linear-gradient(45deg,   transparent 47%, $color 48% ) no-repeat bottom left,
          linear-gradient(-45deg,  transparent 46%, $color 47% ) no-repeat bottom right;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2}), $n3 $n3, $n3 $n3, $n3 $n3, $n3 $n3;
  }
  
  @if ($shape == "scoop") {
    $t-t: t t; // compiler bug hack
    $t-b: t b; // compiler bug hack
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left,
          radial-gradient(a+$t-t+op left,     transparent 64%, $color $pd-scoop ) no-repeat top left,
          radial-gradient(a+$t-t+op right,    transparent 64%, $color $pd-scoop ) no-repeat top right,
          radial-gradient(a+$t-b+ottom left,  transparent 64%, $color $pd-scoop ) no-repeat bottom left,
          radial-gradient(a+$t-b+ottom right, transparent 64%, $color $pd-scoop ) no-repeat bottom right;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2}), $n3 $n3, $n3 $n3, $n3 $n3, $n3 $n3;
  }
  
  @if ($shape == "notch") {
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2});
  }
  
}

.corner-1 {
  transition: all 0.3s;
  @include corners('scoop', 10, #770000);
  &:after {
    transition: all 0.3s;
    @include corners('scoop', 10, #330000);
  }
  &:hover {
    @include corners('scoop', 27, #990000);
    &:after { @include corners('scoop', 27, #330000); }
  }
}

.corner-2 {
  transition: all 0.3s;
  @include corners('bevel', 16, #007700);
  &:after {
    transition: all 0.3s;
    @include corners('bevel', 16, #003300);
  }
  &:hover {
    @include corners('bevel', 40, #009900);
    &:after { @include corners('bevel', 40, #003300); }
  }
}

.corner-3 {
  transition: all 0.3s;
  @include corners('notch', 5, #0055cc);
  &:after {
    transition: all 0.3s;
    @include corners('notch', 5, #002266);
  }
  &:hover {
    @include corners('notch', 15, #0077ee);
    &:after { @include corners('notch', 15, #002266); }
  }
}

.btn {
  display: inline-block;
  padding: 20px 30px 16px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: #fff;
  text-decoration: none;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 4px;
    left: 0;
    z-index: -1;
  }
}

nav {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -40px;
  width: 100%;
  text-align: center;
}

More...