CSS triangle mixin: http://sassmeister.com/gist/9645052

SassMeister-input-HTML.html

<div class="error">
  Required
</div>

<div class="error-up">
  Required
</div>

<div class="error-down">
  Required
</div>

<div class="error-right">
  Required
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass";

@mixin arrow($width: 20px, $height: 20px, $direction: up, $color: red) {
  width: 0;
  height: 0;

  // Right
  @if ($direction == right) {
    border-top: $height/2 solid transparent;
    border-bottom: $height/2 solid transparent;
    border-left: $width solid $color;
  }
  // Left
  @if ($direction == left) {
    border-top: $height/2 solid transparent;
    border-bottom: $height/2 solid transparent;
    border-right: $width solid $color;
  }
  // Up
  @if ($direction == up) {
    border-left: $width/2 solid transparent;
    border-right: $width/2 solid transparent;
    border-bottom: $height solid $color;
  }
  // Down
  @if ($direction == down) {
    border-left: $width/2 solid transparent;
    border-right: $width/2 solid transparent;
    border-top: $height solid $color;
  }
}

// Variables
$color-error: #E05858;
$radius: 3px;
$size-arrow: 10px;
$size-arrow-height: 5px;
$contrasted-lightness-threshold: 100%;

.error {
  @include contrasted($color-error);
  @include border-radius($radius);
  display: inline-block;
  padding: 0.5em 1em;
  margin-left: $size-arrow;
  position: relative;
  &:before {
    @include arrow($size-arrow-height, $size-arrow, left, $color-error);
    content: '';
    left: 0;
    margin: 0 0 0 $size-arrow;
    position: absolute;
    left: -($size-arrow-height + $size-arrow);
    top: 0.5em;
  }
}

.error-up {
  @include contrasted($color-error);
  @include border-radius($radius);
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: $size-arrow;
  position: relative;
  &:before {
    @include arrow($size-arrow, $size-arrow-height, up, $color-error);
    content: '';
    left: 1em;
    margin: $size-arrow 0 0;
    position: absolute;
    top: -($size-arrow-height + $size-arrow);
  }
}

.error-down {
  @include contrasted($color-error);
  @include border-radius($radius);
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: $size-arrow;
  position: relative;
  &:before {
    @include arrow($size-arrow, $size-arrow-height, down, $color-error);
    content: '';
    left: 1em;
    margin: $size-arrow 0 0;
    position: absolute;
    bottom: -($size-arrow-height);
  }
}

.error-right {
  @include contrasted($color-error);
  @include border-radius($radius);
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: $size-arrow;
  position: relative;
  &:after {
    @include arrow($size-arrow, $size-arrow, right, $color-error);
    content: '';
    right: -($size-arrow * 2);
    margin: 0 $size-arrow 0 0;
    position: absolute;
    top: 0.5em;
  }
}

SassMeister-output.css

.error {
  background-color: #e05858;
  color: black;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-left: 10px;
  position: relative;
}
.error:before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #e05858;
  content: '';
  left: 0;
  margin: 0 0 0 10px;
  position: absolute;
  left: -15px;
  top: 0.5em;
}

.error-up {
  background-color: #e05858;
  color: black;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: 10px;
  position: relative;
}
.error-up:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #e05858;
  content: '';
  left: 1em;
  margin: 10px 0 0;
  position: absolute;
  top: -15px;
}

.error-down {
  background-color: #e05858;
  color: black;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: 10px;
  position: relative;
}
.error-down:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #e05858;
  content: '';
  left: 1em;
  margin: 10px 0 0;
  position: absolute;
  bottom: -5px;
}

.error-right {
  background-color: #e05858;
  color: black;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: 10px;
  position: relative;
}
.error-right:after {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #e05858;
  content: '';
  right: -20px;
  margin: 0 10px 0 0;
  position: absolute;
  top: 0.5em;
}

SassMeister-rendered.html

<div class="error">
  Required
</div>

<div class="error-up">
  Required
</div>

<div class="error-down">
  Required
</div>

<div class="error-right">
  Required
</div>