Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--left"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--right"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--top"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--bottom"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

.NewModal {
 padding: 20px;
 border: grey solid 1px;
 position:absolute;
 top: 50px;
 
 &:nth-child(4n+1){
  left: 150px;
 }
 
 &:nth-child(4n+2){
  left: 600px;
 }
 
 &:nth-child(4n+3){
  left: 1050px;
 }
 
 &:nth-child(4n+4){
  left: 1500px;
 }
}

$new-modal-triangle-size: 20px;
$new-modal-background-color: grey;
$new-modal-border-color: red;
$new-modal-border-width: 1px;


@function opposite-side($side){
  $sides:(
    top: bottom,
    bottom: top,
    left: right,
    right: left
  );
  @return map-get($sides, $side);
}

@function complementary-sides($side) {
  $sides:(
    top: left right,
    bottom: left right,
    left: top bottom,
    right: top bottom
  );
  @return map-get($sides, $side);
}

@function is-horizontal($direction){
  @return ( $direction == left or $direction == right );
}

@mixin triangle( $direction, $size, $colour, $border-width: null, $border-color: null ) {
  $adjacent: opposite-side($direction);
  $complementary: complementary-sides($direction);
  $offset: '';
  @if is-horizontal($direction) {
    $offset: top;
  }@else{
    $offset: left;
  }
  
  &:after,
  &:before{
    content: '';
    height:0;
    width:0;
    position: absolute;
    border: solid transparent;
    pointer-events: none;
    #{$adjacent}:100%;
  }
  
  &:after {
    border-#{$adjacent}-color: $colour;
    border-width: $size;
    margin-#{$offset}: -$size;
    #{$adjacent}: 100%;
  }
  
  @if $border-width and $border-color {
    $before-size: $size + round($border-width * 1.41421356);// cos(PI/4) * 2
    &:before {
      border-width: $before-size;
      border-#{$adjacent}-color:$border-color;
      margin-#{$offset}:-$before-size;
    }
  }
}


.NewModal {
  border: $new-modal-border-width solid $new-modal-border-color;
  background: $new-modal-background-color;
  color: white;
  
  &-arrow {
    
    position: absolute;
    left:0;
    top:0;

    $directions: top bottom left right;

      @each $direction in $directions {
        &--#{$direction} {
            @include triangle($direction, $new-modal-triangle-size, $new-modal-background-color, $new-modal-border-width, $new-modal-border-color
 );
        }
      }
  }
  
}

SassMeister-output.css

.NewModal {
  padding: 20px;
  border: grey solid 1px;
  position: absolute;
  top: 50px;
}
.NewModal:nth-child(4n+1) {
  left: 150px;
}
.NewModal:nth-child(4n+2) {
  left: 600px;
}
.NewModal:nth-child(4n+3) {
  left: 1050px;
}
.NewModal:nth-child(4n+4) {
  left: 1500px;
}

.NewModal {
  border: 1px solid red;
  background: grey;
  color: white;
}
.NewModal-arrow {
  position: absolute;
  left: 0;
  top: 0;
}
.NewModal-arrow--top:after, .NewModal-arrow--top:before {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  border: solid transparent;
  pointer-events: none;
  bottom: 100%;
}
.NewModal-arrow--top:after {
  border-bottom-color: grey;
  border-width: 20px;
  margin-left: -20px;
  bottom: 100%;
}
.NewModal-arrow--top:before {
  border-width: 21px;
  border-bottom-color: red;
  margin-left: -21px;
}
.NewModal-arrow--bottom:after, .NewModal-arrow--bottom:before {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  border: solid transparent;
  pointer-events: none;
  top: 100%;
}
.NewModal-arrow--bottom:after {
  border-top-color: grey;
  border-width: 20px;
  margin-left: -20px;
  top: 100%;
}
.NewModal-arrow--bottom:before {
  border-width: 21px;
  border-top-color: red;
  margin-left: -21px;
}
.NewModal-arrow--left:after, .NewModal-arrow--left:before {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  border: solid transparent;
  pointer-events: none;
  right: 100%;
}
.NewModal-arrow--left:after {
  border-right-color: grey;
  border-width: 20px;
  margin-top: -20px;
  right: 100%;
}
.NewModal-arrow--left:before {
  border-width: 21px;
  border-right-color: red;
  margin-top: -21px;
}
.NewModal-arrow--right:after, .NewModal-arrow--right:before {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  border: solid transparent;
  pointer-events: none;
  left: 100%;
}
.NewModal-arrow--right:after {
  border-left-color: grey;
  border-width: 20px;
  margin-top: -20px;
  left: 100%;
}
.NewModal-arrow--right:before {
  border-width: 21px;
  border-left-color: red;
  margin-top: -21px;
}

SassMeister-rendered.html

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--left"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--right"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--top"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>

<div class="NewModal">
  <div class="NewModal-arrow NewModal-arrow--bottom"></div>
  <p>This is some text about some stuff and other stuff</p>
</div>