A Pen by Evan Lovely.

index.html

<div class="box"></div>
<br />
<div class="box bigger"></div>

Mixin:-Arrow.markdown

Mixin: Arrow

A Pen by Evan Lovely on CodePen.

License.

style.scss

@import "compass";
@mixin arrow($size:6px, $color: #2f89c3, $sides: both) {
  position: relative;
  &:before,
  &:after {
    content: "";
    border-bottom: $color $size solid;
    position: absolute;
    top: -1 * $size;
  }
  @if $sides == left or both {
    &:before {
      border-left: transparent $size solid;
      margin-left: -1 * $size;
    }
  }
  @if $sides == right or both {
    &:after {
      border-right: transparent $size solid;
      margin-right: (-1 * $size) + 1;
    }
  }
}

.box {
  margin: 1em;
  padding: 0.75em;
  background: #2f89c3;
  width: 50px;
  height: 50px;
  @include arrow($sides: both);
}
  
.box.bigger {
  @include arrow(10px);
}