Skip to content

Instantly share code, notes, and snippets.

@jondaiello
Last active February 22, 2024 15:18
Show Gist options
  • Save jondaiello/a0cc2dbf8994ff757e4ac13bb8168969 to your computer and use it in GitHub Desktop.
Save jondaiello/a0cc2dbf8994ff757e4ac13bb8168969 to your computer and use it in GitHub Desktop.
SASS @mixin for Arrows
// Demo at http://codepen.io/jondaiello/full/YWRbOx/
/* 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;
}
}
}
}
@jondaiello
Copy link
Author

Thanks for the comment @KasperAndersson! I've updated my Gist as well to reflect an $arrowSize parameter. I had a few other comments about this too, so thanks for pointing it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment