CSS Arrows http://sassmeister.com/gist/90926930396d9551b8ec

SassMeister-input-HTML.html

<div class="label">Label</div>
<input type="text">
<div class="error-bottom">error</div>

<br><br><br><br>
<div class="label">Label</div>
<div class="error-top">error</div>
<input type="text">

<br><br><br><br>
<div class="label">Label</div>
<div class="error-left">error</div>
<input type="text" class="inline_input">

<br><br><br><br>
<div class="label">Label</div>
<input type="text" class="inline_input">
<div class="error-right">error</div>

SassMeister-input.scss

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

@import "compass";

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

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


// Variables
$color-error: #E05858;
$size-radius-small: 3px;
$contrasted-lightness-threshold: 100%; 
$color-bg-error: lighten(desaturate($color-error, 30%), 25%);

$size-arrow: 7px;
$size-arrow-height: 7px;

input[type=text] {
  display: block;
  width: 100%;

  &.inline_input {
    display: inline-block;
    width: auto;
  }
}


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

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

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

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

SassMeister-output.css

input[type=text] {
  display: block;
  width: 100%;
}
input[type=text].inline_input {
  display: inline-block;
  width: auto;
}

.error-bottom {
  background-color: #e9cece;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: 7px;
  position: relative;
}
.error-bottom:before {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #e9cece;
  content: '';
  left: 1em;
  margin: 7px 0 0;
  position: absolute;
  top: -14px;
}

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

.error-right {
  background-color: #e9cece;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-left: 7px;
  position: relative;
}
.error-right:before {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #e9cece;
  content: '';
  left: 0;
  margin: 0 0 0 7px;
  position: absolute;
  left: -14px;
  top: 0.5em;
}

.error-left {
  background-color: #e9cece;
  border-radius: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  margin-right: 7px;
  position: relative;
}
.error-left:after {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #e9cece;
  content: '';
  right: -14px;
  margin: 0 7px 0 0;
  position: absolute;
  top: 0.5em;
}

SassMeister-rendered.html

<div class="label">Label</div>
<input type="text">
<div class="error-bottom">error</div>

<br><br><br><br>
<div class="label">Label</div>
<div class="error-top">error</div>
<input type="text">

<br><br><br><br>
<div class="label">Label</div>
<div class="error-left">error</div>
<input type="text" class="inline_input">

<br><br><br><br>
<div class="label">Label</div>
<input type="text" class="inline_input">
<div class="error-right">error</div>