<header class="c-header"><h1>A Single SASS @mixin for Creating CSS Arrows</h1></header>

<div class="c-box c-box--arrow-top">
  This box has a top arrow.

<div class="c-box c-box--arrow-right">
  This box has a right arrow.

<div class="c-box c-box--arrow-bottom">
  This box has a bottom arrow.

<div class="c-box c-box--arrow-left">
  This box has a left arrow.

<footer class="c-footer">
<a class="c-btn" href="https://gist.github.com/jondaiello/a0cc2dbf8994ff757e4ac13bb8168969" target="_blank">Grab the Gist</a>
/* This mixin is for generating CSS arrows on a box */
@mixin box-arrow($arrowDirection, $arrowColor, $arrowSize: 10px) {
  position: relative;
  z-index: 10;

  &::after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    z-index: 10;
    border: 0;

    @if $arrowDirection == bottom or $arrowDirection == top {
      border-left: $arrowSize solid transparent;
      border-right: $arrowSize solid transparent;
      margin-left: -$arrowSize;
      left: 50%;

      @if $arrowDirection == bottom {
        border-top: $arrowSize solid $arrowColor;
        bottom: -$arrowSize;

      @if $arrowDirection == top {
        border-bottom: $arrowSize solid $arrowColor;
        top: -$arrowSize;

    @if $arrowDirection == left or $arrowDirection == right {
      border-top: $arrowSize solid transparent;
      border-bottom: $arrowSize solid transparent;
      margin-top: -$arrowSize;
      top: 50%;

      @if $arrowDirection == left {
        border-right: $arrowSize solid $arrowColor;
        left: -$arrowSize;

      @if $arrowDirection == right {
        border-left: $arrowSize solid $arrowColor;
        left: auto;
        right: -$arrowSize;

// set some variables to reuse

$boxbkg: #587b7f;
$bodybkg: #f9f6ef;
$btncolor: #d87517;

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 5vmin;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  background: $bodybkg;

.c-header {
  width: 100%;
  text-align: center;
  font-size: calc(100% + 1vmin);
  h1 {
    font-weight: 700;
    color: #333;

.c-box {
  background: $boxbkg;
  font-size: 150%;
  text-align: center;
  color: #fff;
  flex-basis: 30%;
  padding: 5vmin;
  margin: 5vmin;
  &--arrow-top {
    @include box-arrow(top, $boxbkg);  
  &--arrow-right {
    @include box-arrow(right, $boxbkg);  
  &--arrow-bottom {
    @include box-arrow(bottom, $boxbkg);  
  &--arrow-left {
    @include box-arrow(left, $boxbkg);  

.c-footer {
  width: 100%;
  text-align: center;

.c-btn {
  background: $btncolor;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .75em 1.5em .85em;
  font-size: 120%;
  line-height: 140%;
  border-radius: 2px;
  border: 3px solid $btncolor;
  box-shadow: 0 4px 0 0 rgba(0,0,0,.1);
  transition: .2s all ease-out;
  &:hover {
    color: $btncolor;
    background: #fff;
    box-shadow: 0 6px 0 0 rgba(0,0,0,.2);
    border: 3px solid $btncolor;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.