Skip to content

Instantly share code, notes, and snippets.

@ahaywood
Created June 5, 2014 02:15
Show Gist options
  • Save ahaywood/37c8a4aac0e30eca373f to your computer and use it in GitHub Desktop.
Save ahaywood/37c8a4aac0e30eca373f to your computer and use it in GitHub Desktop.
SASS: Arrow Mixin
// REFERENCE http://css-tricks.com/snippets/css/css-triangle/
@mixin arrow ($direction, $size, $color) {
@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;
} @else if $direction == right {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
} @else if $direction == left {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right:$size solid $color;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment