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;
}
}
}
}
@KasperAndersson
Copy link

Took my time to rewrite it a little, to be able to add dynamic width to the arrow

@mixin box-arrow($arrowDirection, $arrowColor, $arrowWidth: 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: $arrowWidth solid transparent;
      border-right: $arrowWidth solid transparent;
      left:50%;
      transform:translateX(-50%);

      @if $arrowDirection == bottom {
        border-top: $arrowWidth solid $arrowColor;
        top:100%;
      }

      @if $arrowDirection == top {
        border-bottom: $arrowWidth solid $arrowColor;
        bottom:100%;
      }
    }

    @if $arrowDirection == left or $arrowDirection == right {
      border-top: $arrowWidth solid transparent;
      border-bottom: $arrowWidth solid transparent;
      transform:translateY(-50%);
      top: 50%;

      @if $arrowDirection == left {
        border-right: $arrowWidth solid $arrowColor;
         right:100%;
      }

      @if $arrowDirection == right {
        border-left: $arrowWidth solid $arrowColor;
        left:100%;
      }
    }
  }
}

See it in action

@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