Skip to content

Instantly share code, notes, and snippets.

@mdahlke
Created January 11, 2017 02:55
Show Gist options
  • Save mdahlke/56247faece8aee4eaf331ea8a5cc29a7 to your computer and use it in GitHub Desktop.
Save mdahlke/56247faece8aee4eaf331ea8a5cc29a7 to your computer and use it in GitHub Desktop.
Create arrows quickly with a SCSS mixin Raw
@mixin arrow($direction: 'up', $size: 5px, $color: black) {
width: 0;
height: 0;
@if ($direction == 'up') {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
} @else if ($direction == 'down') {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
border-top: $size solid $color;
} @else if ($direction == 'left') {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
} @else if ($direction == 'right') {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Contact GitHub API Training Shop Blog About
© 2017 GitHub, Inc. Terms Privacy Security Status Help
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment