CSS Arrow Mixin With Borders

A simple SCSS/SASS mixin to create CSS arrows with the option to have borders as well as having the arrow inside the box. Properly caclulates the border width of the arrow to match the box border width.

View on Github

Sample Code Structure

<div class="arrow">Lorem Ipsum</div> .arrow {
    border: 3px solid #97d4e8;
    border-radius: 4px;
    background: #c8e7f1;
    color: #2d7187;
    margin: 0 auto 40px;
    padding: 20px;
    text-align: center;
    width: 200px;
}

Demonstration

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
/* Top */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, top);
}

/* Right */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, right);
}

/* Bottom */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, bottom);
}

/* Left */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, left);
}
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
/* Top */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, top, false);
}

/* Right */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, false);

}

/* Bottom */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, false);
}

/* Left */
.arrow {
    @include css-arrow(10px, 3px, #c8e7f1, #97d4e8, false);
}
Lorem Ipsum
Lorem Ipsum
/* No Borders Outside */
.arrow {
    @include css-arrow(10px, 0, #c8e7f1);
    border: none;
}

/* No Borders Inside */
.arrow {
    @include css-arrow(10px, 0, white, none, bottom, false);
    border: none;
}

Author: Jerry Low (@jerrylowm)