Skip to content

Instantly share code, notes, and snippets.

@crazyrohila
Last active December 22, 2015 17:19
Show Gist options
  • Save crazyrohila/6505664 to your computer and use it in GitHub Desktop.
Save crazyrohila/6505664 to your computer and use it in GitHub Desktop.
A mixin to create arrows.
/**
* variables:-
* @width: horizontal length of arrow.
* @height: vertical length of arrow.
* @dir: dirction of arrow. eg. top, right, bottom, left.
* @bg: color of arrow.
*/
@mixin arrows($width, $height, $dir, $bg) {
width: $width;
height: $height;
overflow: hidden;
position: relative;
background: $bg;
&:before, &:after {
content: "";
position: absolute;
width: 100%; height: 100%;
border-#{$dir}: $width solid #fff;
}
@if $dir == top {
&:before {
left: -50%;
border-right: $width/2 solid transparent;
}
&:after {
right: -50%;
border-left: $width/2 solid transparent;
}
}
@else if $dir == bottom {
&:before {
left: -50%;
border-right: $width/2 solid transparent;
}
&:after {
right: -50%;
border-left: $width/2 solid transparent;
}
}
@else if $dir == left {
&:before {
bottom: -50%;
border-top: $width/2 solid transparent;
}
&:after {
top: -50%;
border-bottom: $width/2 solid transparent;
}
}
@else if $dir == right {
&:before {
bottom: -50%;
border-top: $width/2 solid transparent;
}
&:after {
top: -50%;
border-bottom: $width/2 solid transparent;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment