Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">
  Lorem ipsum dolor sit amet <br />
  Lorem ipsum dolor sit amet
</div>


<div class="bar">
  Lorem ipsum dolor sit amet <br />
  Lorem ipsum dolor sit amet
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$color-primary: red;
$color-secondary: #BADA55;

// Mixin for generating solid-colour, pure CSS arrows pointing out from elements.
//
// Pass in mandatory edge, location, and colour information.
// Optionally specify a size (small, medium, large, <value>) and an offset
// (<value>) which moves the arrow in from an edge by <value>.
//
// .simple-usage {
//   @include arrow(top, right, red);
// }
//
// .complex-usage {
//   // Create a 50px yellow arrow that sits 5% in from the top right of a box.
//   @include arrow(top, right, yellow, 50px, 5%);
// }
@mixin arrow($edge, $location, $color, $size: 20px, $offset: 0) {

  // If an offset has been defined, let’s use it.
  @if ($offset != 0) {
    $offset: $offset;
  }

  // Map keyword sizes to actual numbers. Use passed0in value if defined.
  @if ($size == 'small') {
    $size: 10px;
  } @elseif ($size == 'medium') {
    $size: 15px;
  } @elseif ($size == 'large') {
    $size: 20px;
  } @else {
    $size: $size;
  }

  /**
   * Host element styles.
   *
   * 1. Host element needs relative positioning.
   */
  position: relative; /* [1] */

  /**
   * This is where the magic happens. Pure CSS arrows.
   *
   * 1. Ensure it sits above the host element.
   * 2. Use borders to create the arrow effect.
   * 3. Defensively reset a bunch of things so we can have different arrows
   *    across multiple breakpoints. This produces a lot of redundancy *if*
   *    we have multiple responsive arrows, but it’s the most simple and
   *    robust way of managing things. I’d rather have clarity than terseness
   *    in a situation like this.
   */
  &:before {
    content: "";
    position: absolute;
    z-index: 1; /* [1] */
    border: $size solid transparent; /* [2] */
    margin: 0;    /* [3] */
    top:    auto; /* [3] */
    right:  auto; /* [3] */
    bottom: auto; /* [3] */
    left:   auto; /* [3] */

    @if ($edge == 'top') {
      bottom: 100%;
      border-bottom-color: $color;

      @if ($location == 'left') {
        left: $offset;
      }

      @if ($location == 'middle') {
        left: 50%;
        margin-left: -$size;
      }

      @if ($location == 'right') {
        right: $offset;
      }

    }

    @if ($edge == 'right') {
      left: 100%;
      border-left-color: $color;

      @if ($location == 'top') {
        top: $offset;
      }

      @if ($location == 'middle') {
        top: 50%;
        margin-top: -$size;
      }

      @if ($location == 'bottom') {
        bottom: $offset;
      }

    }

    @if ($edge == 'bottom') {
      top: 100%;
      border-top-color: $color;

      @if ($location == 'left') {
        left: $offset;
      }

      @if ($location == 'middle') {
        left: 50%;
        margin-left: -$size;
      }

      @if ($location == 'right') {
        right: $offset;
      }

    }

    @if ($edge == 'left') {
      right: 100%;
      border-right-color: $color;

      @if ($location == 'top') {
        top: $offset;
      }

      @if ($location == 'middle') {
        top: 50%;
        margin-top: -$size;
      }

      @if ($location == 'bottom') {
        bottom: $offset;
      }

    }

  }

}

html {
  padding: 1.5em;
}


.foo {
  padding: 1em;
  background-color: $color-primary;
  @include arrow(bottom, left, $color-primary, small, 10px);

  @media screen and (min-width: 30em) {
    @include arrow(top, right, $color-primary, small, 10px);
  }

  @media screen and (min-width: 45em) {
    @include arrow(left, middle, $color-primary, medium);
  }

  @media screen and (min-width: 64em) {
    @include arrow(bottom, middle, $color-primary, large);
  }

}


.bar {
  padding: 1em;
  background-color: $color-secondary;
  @include arrow(top, right, $color-secondary, small, 10px);

  @media screen and (min-width: 30em) {
    @include arrow(bottom, left, $color-secondary, small, 10px);
  }

  @media screen and (min-width: 45em) {
    @include arrow(right, middle, $color-secondary, medium);
  }

  @media screen and (min-width: 64em) {
    @include arrow(bottom, middle, $color-secondary, large);
  }

}

SassMeister-output.css

@charset "UTF-8";
html {
  padding: 1.5em;
}

.foo {
  padding: 1em;
  background-color: red;
  /**
   * Host element styles.
   *
   * 1. Host element needs relative positioning.
   */
  position: relative;
  /* [1] */
  /**
   * This is where the magic happens. Pure CSS arrows.
   *
   * 1. Ensure it sits above the host element.
   * 2. Use borders to create the arrow effect.
   * 3. Defensively reset a bunch of things so we can have different arrows
   *    across multiple breakpoints. This produces a lot of redundancy *if*
   *    we have multiple responsive arrows, but it’s the most simple and
   *    robust way of managing things. I’d rather have clarity than terseness
   *    in a situation like this.
   */
}
.foo:before {
  content: "";
  position: absolute;
  z-index: 1;
  /* [1] */
  border: 10px solid transparent;
  /* [2] */
  margin: 0;
  /* [3] */
  top: auto;
  /* [3] */
  right: auto;
  /* [3] */
  bottom: auto;
  /* [3] */
  left: auto;
  /* [3] */
  top: 100%;
  border-top-color: red;
  left: 10px;
}
@media screen and (min-width: 30em) {
  .foo {
    /**
     * Host element styles.
     *
     * 1. Host element needs relative positioning.
     */
    position: relative;
    /* [1] */
    /**
     * This is where the magic happens. Pure CSS arrows.
     *
     * 1. Ensure it sits above the host element.
     * 2. Use borders to create the arrow effect.
     * 3. Defensively reset a bunch of things so we can have different arrows
     *    across multiple breakpoints. This produces a lot of redundancy *if*
     *    we have multiple responsive arrows, but it’s the most simple and
     *    robust way of managing things. I’d rather have clarity than terseness
     *    in a situation like this.
     */
  }
  .foo:before {
    content: "";
    position: absolute;
    z-index: 1;
    /* [1] */
    border: 10px solid transparent;
    /* [2] */
    margin: 0;
    /* [3] */
    top: auto;
    /* [3] */
    right: auto;
    /* [3] */
    bottom: auto;
    /* [3] */
    left: auto;
    /* [3] */
    bottom: 100%;
    border-bottom-color: red;
    right: 10px;
  }
}
@media screen and (min-width: 45em) {
  .foo {
    /**
     * Host element styles.
     *
     * 1. Host element needs relative positioning.
     */
    position: relative;
    /* [1] */
    /**
     * This is where the magic happens. Pure CSS arrows.
     *
     * 1. Ensure it sits above the host element.
     * 2. Use borders to create the arrow effect.
     * 3. Defensively reset a bunch of things so we can have different arrows
     *    across multiple breakpoints. This produces a lot of redundancy *if*
     *    we have multiple responsive arrows, but it’s the most simple and
     *    robust way of managing things. I’d rather have clarity than terseness
     *    in a situation like this.
     */
  }
  .foo:before {
    content: "";
    position: absolute;
    z-index: 1;
    /* [1] */
    border: 15px solid transparent;
    /* [2] */
    margin: 0;
    /* [3] */
    top: auto;
    /* [3] */
    right: auto;
    /* [3] */
    bottom: auto;
    /* [3] */
    left: auto;
    /* [3] */
    right: 100%;
    border-right-color: red;
    top: 50%;
    margin-top: -15px;
  }
}
@media screen and (min-width: 64em) {
  .foo {
    /**
     * Host element styles.
     *
     * 1. Host element needs relative positioning.
     */
    position: relative;
    /* [1] */
    /**
     * This is where the magic happens. Pure CSS arrows.
     *
     * 1. Ensure it sits above the host element.
     * 2. Use borders to create the arrow effect.
     * 3. Defensively reset a bunch of things so we can have different arrows
     *    across multiple breakpoints. This produces a lot of redundancy *if*
     *    we have multiple responsive arrows, but it’s the most simple and
     *    robust way of managing things. I’d rather have clarity than terseness
     *    in a situation like this.
     */
  }
  .foo:before {
    content: "";
    position: absolute;
    z-index: 1;
    /* [1] */
    border: 20px solid transparent;
    /* [2] */
    margin: 0;
    /* [3] */
    top: auto;
    /* [3] */
    right: auto;
    /* [3] */
    bottom: auto;
    /* [3] */
    left: auto;
    /* [3] */
    top: 100%;
    border-top-color: red;
    left: 50%;
    margin-left: -20px;
  }
}

.bar {
  padding: 1em;
  background-color: #BADA55;
  /**
   * Host element styles.
   *
   * 1. Host element needs relative positioning.
   */
  position: relative;
  /* [1] */
  /**
   * This is where the magic happens. Pure CSS arrows.
   *
   * 1. Ensure it sits above the host element.
   * 2. Use borders to create the arrow effect.
   * 3. Defensively reset a bunch of things so we can have different arrows
   *    across multiple breakpoints. This produces a lot of redundancy *if*
   *    we have multiple responsive arrows, but it’s the most simple and
   *    robust way of managing things. I’d rather have clarity than terseness
   *    in a situation like this.
   */
}
.bar:before {
  content: "";
  position: absolute;
  z-index: 1;
  /* [1] */
  border: 10px solid transparent;
  /* [2] */
  margin: 0;
  /* [3] */
  top: auto;
  /* [3] */
  right: auto;
  /* [3] */
  bottom: auto;
  /* [3] */
  left: auto;
  /* [3] */
  bottom: 100%;
  border-bottom-color: #BADA55;
  right: 10px;
}
@media screen and (min-width: 30em) {
  .bar {
    /**
     * Host element styles.
     *
     * 1. Host element needs relative positioning.
     */
    position: relative;
    /* [1] */
    /**
     * This is where the magic happens. Pure CSS arrows.
     *
     * 1. Ensure it sits above the host element.
     * 2. Use borders to create the arrow effect.
     * 3. Defensively reset a bunch of things so we can have different arrows
     *    across multiple breakpoints. This produces a lot of redundancy *if*
     *    we have multiple responsive arrows, but it’s the most simple and
     *    robust way of managing things. I’d rather have clarity than terseness
     *    in a situation like this.
     */
  }
  .bar:before {
    content: "";
    position: absolute;
    z-index: 1;
    /* [1] */
    border: 10px solid transparent;
    /* [2] */
    margin: 0;
    /* [3] */
    top: auto;
    /* [3] */
    right: auto;
    /* [3] */
    bottom: auto;
    /* [3] */
    left: auto;
    /* [3] */
    top: 100%;
    border-top-color: #BADA55;
    left: 10px;
  }
}
@media screen and (min-width: 45em) {
  .bar {
    /**
     * Host element styles.
     *
     * 1. Host element needs relative positioning.
     */
    position: relative;
    /* [1] */
    /**
     * This is where the magic happens. Pure CSS arrows.
     *
     * 1. Ensure it sits above the host element.
     * 2. Use borders to create the arrow effect.
     * 3. Defensively reset a bunch of things so we can have different arrows
     *    across multiple breakpoints. This produces a lot of redundancy *if*
     *    we have multiple responsive arrows, but it’s the most simple and
     *    robust way of managing things. I’d rather have clarity than terseness
     *    in a situation like this.
     */
  }
  .bar:before {
    content: "";
    position: absolute;
    z-index: 1;
    /* [1] */
    border: 15px solid transparent;
    /* [2] */
    margin: 0;
    /* [3] */
    top: auto;
    /* [3] */
    right: auto;
    /* [3] */
    bottom: auto;
    /* [3] */
    left: auto;
    /* [3] */
    left: 100%;
    border-left-color: #BADA55;
    top: 50%;
    margin-top: -15px;
  }
}
@media screen and (min-width: 64em) {
  .bar {
    /**
     * Host element styles.
     *
     * 1. Host element needs relative positioning.
     */
    position: relative;
    /* [1] */
    /**
     * This is where the magic happens. Pure CSS arrows.
     *
     * 1. Ensure it sits above the host element.
     * 2. Use borders to create the arrow effect.
     * 3. Defensively reset a bunch of things so we can have different arrows
     *    across multiple breakpoints. This produces a lot of redundancy *if*
     *    we have multiple responsive arrows, but it’s the most simple and
     *    robust way of managing things. I’d rather have clarity than terseness
     *    in a situation like this.
     */
  }
  .bar:before {
    content: "";
    position: absolute;
    z-index: 1;
    /* [1] */
    border: 20px solid transparent;
    /* [2] */
    margin: 0;
    /* [3] */
    top: auto;
    /* [3] */
    right: auto;
    /* [3] */
    bottom: auto;
    /* [3] */
    left: auto;
    /* [3] */
    top: 100%;
    border-top-color: #BADA55;
    left: 50%;
    margin-left: -20px;
  }
}

SassMeister-rendered.html

<div class="foo">
  Lorem ipsum dolor sit amet <br />
  Lorem ipsum dolor sit amet
</div>


<div class="bar">
  Lorem ipsum dolor sit amet <br />
  Lorem ipsum dolor sit amet
</div>