Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS arrows mixin with option to position
// -----------------------------
// arrows
// -----------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// $position: true or false - optional (move to overhanging centered edge, message box style)
// @example
// .element{
// @include arrow(top, #000, 50px, true);
// }
@mixin arrow($direction, $color, $size, $position: false){
display: block;
height: 0;
width: 0;
@if $position == true {
content: "";
position: absolute;
@if $direction == 'top' {
top: auto;
bottom: 100%;
left: 50%;
right: auto;
margin: 0 0 0 (-$size);
}
@else if $direction == 'bottom' {
top: auto;
bottom: 50%;
left: auto;
right: 50%;
margin:0 0 (-$size) 0;
}
@else if $direction == 'left' {
top: 50%;
bottom: auto;
left: auto;
right: 100%;
margin:0 (-$size) 0 0;
}
@else if $direction == 'right' {
top: 50%;
bottom: auto;
left: 100%;
right: auto;
margin:(-$size) 0 0 0;
}
}
@if $direction == 'top' {
border-top: $size solid transparent;
border-bottom: $size solid $color;
border-left: $size solid transparent;
border-right: $size solid transparent;
}
@else if $direction == 'right' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
border-right: $size solid transparent;
}
@else if $direction == 'bottom' {
border-top: $size solid $color;
border-bottom: $size solid transparent;
border-right: $size solid transparent;
border-left: $size solid transparent;
}
@else if $direction == 'left' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid transparent;
border-right: $size solid $color;
}
@else if $direction == 'top-left' {
border-top: $size solid $color;
border-right: $size solid transparent;
}
@else if $direction == 'top-right' {
border-top: $size solid $color;
border-left: $size solid transparent;
}
@else if $direction == 'bottom-left' {
border-bottom: $size solid $color;
border-right: $size solid transparent;
}
@else if $direction == 'bottom-right' {
border-bottom: $size solid $color;
border-left: $size solid transparent;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.