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.
<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;
}
/* 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);
}
/* 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);
}
/* 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)