Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box">
    <div class="tip__n"></div>
</div>
<div class="box">
    <div class="tip__e"></div>
</div>
<div class="box">
    <div class="tip__s"></div>
</div>
<div class="box">
    <div class="tip__w"></div>
</div>

SassMeister-input.scss

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

body {
  background: #eee;
}

.box {
    display: inline-block;
    border: 1px solid deeppink;
    background: #fff;
    width: 100px;
    height: 100px;
    position: relative;
    top: 100px;
    left: 100px;
    margin: 20px;
    box-shadow: 1px 1px 5px rgba(0,0,0,.3);

}

@mixin triangle($size, $border-color, $bg-color) {
  
  // structure
  &__n, &__e, &__s, &__w {
    display: inline-block;
    position: absolute;
    
    &::before, &::after {
      display: inline-block;
      position: absolute;
      content:"";
      width: 0;
      height: 0;
      border: 0 solid transparent;
    }
  }

  // dimensions
  &__w, &__e {
    width: $size;
    height: $size * 2;
  }
  &__n, &__s {
    width: $size * 2;
    height: $size;
  }

  // position
  &__n {top: (-1 * $size); left: 0;}
  &__e {top: 0; right: (-1 * $size);}
  &__s {bottom: (-1 * $size); left: 0;}
  &__w {top: 0; left: (-1 * $size);}    

  // arrow north
  &__n::before, &__n::after {
    border-width: 0 $size $size $size;
    top: 0;
    left: 0;
    border-bottom-color: $border-color;
  }
  &__n::after {
    top: 1px;
    border-bottom-color: $bg-color;
  }
  
  // arrow east
  &__e::before, &__e::after {
    border-width: $size 0 $size $size;
    right: 0;
    border-left-color: $border-color;
  }
  &__e::after {
    right: 1px;
    border-left-color: $bg-color;
  }
  
  // arrow south
  &__s::before, &__s::after {
    border-width: $size $size 0 $size;
    bottom: 0;
    left: 0;
    border-top-color: $border-color;
  }
  &__s::after {
    bottom: 1px;
    border-top-color: $bg-color;
  }
  
  // arrow west
  &__w::before, &__w::after {
    border-width: $size $size $size 0px;
    left: 0;
    border-right-color: $border-color;
  }
  &__w::after {
    left: 1px;
    border-right-color: $bg-color;
  }

}

.tip {
  @include triangle(12px, deeppink, white);
}

SassMeister-output.css

body {
  background: #eee;
}

.box {
  display: inline-block;
  border: 1px solid deeppink;
  background: #fff;
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  margin: 20px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.tip__n, .tip__e, .tip__s, .tip__w {
  display: inline-block;
  position: absolute;
}
.tip__n::before, .tip__n::after, .tip__e::before, .tip__e::after, .tip__s::before, .tip__s::after, .tip__w::before, .tip__w::after {
  display: inline-block;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 0 solid transparent;
}
.tip__w, .tip__e {
  width: 12px;
  height: 24px;
}
.tip__n, .tip__s {
  width: 24px;
  height: 12px;
}
.tip__n {
  top: -12px;
  left: 0;
}
.tip__e {
  top: 0;
  right: -12px;
}
.tip__s {
  bottom: -12px;
  left: 0;
}
.tip__w {
  top: 0;
  left: -12px;
}
.tip__n::before, .tip__n::after {
  border-width: 0 12px 12px 12px;
  top: 0;
  left: 0;
  border-bottom-color: deeppink;
}
.tip__n::after {
  top: 1px;
  border-bottom-color: white;
}
.tip__e::before, .tip__e::after {
  border-width: 12px 0 12px 12px;
  right: 0;
  border-left-color: deeppink;
}
.tip__e::after {
  right: 1px;
  border-left-color: white;
}
.tip__s::before, .tip__s::after {
  border-width: 12px 12px 0 12px;
  bottom: 0;
  left: 0;
  border-top-color: deeppink;
}
.tip__s::after {
  bottom: 1px;
  border-top-color: white;
}
.tip__w::before, .tip__w::after {
  border-width: 12px 12px 12px 0px;
  left: 0;
  border-right-color: deeppink;
}
.tip__w::after {
  left: 1px;
  border-right-color: white;
}

SassMeister-rendered.html

<div class="box">
    <div class="tip__n"></div>
</div>
<div class="box">
    <div class="tip__e"></div>
</div>
<div class="box">
    <div class="tip__s"></div>
</div>
<div class="box">
    <div class="tip__w"></div>
</div>