Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS Arrow Please!
/* Coded by @passcod, MIT Licensed: passcod.mit-license.org
Adapted from @shojberg's cssarrowplease.com
*/
@mixin arrow-box( $selector: ".arrow-box",
$position: "top",
$arrow_size: 10px,
$border_width: 2px,
$box_color: #333,
$border_color: #ccc) {
// We need the inverse of the arrow's position
// and while we're at it, we might as well just
// make sure the input does nothing unepected.
$inverse: "bottom";
$sideway: "left";
@if $position == "left" {
$inverse: "right";
$sideway: "top";
} @else if $position == "bottom" {
$inverse: "top";
$sideway: "left";
} @else if $position == "right" {
$inverse: "left";
$sideway: "top";
} @else {
$position: "top";
}
$border: false;
$cumul: 0;
@if $border_width > 0 {
$border: true;
$cumul: $arrow_size + round($border_width * 1.41421356); // cos(PI/4) * 2
}
#{$selector} {
position: relative;
background: $box_color;
@if $border { border: $border_width solid $border_color; }
// Need to be in content-box mode for this to work!
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
$ab: $selector + ":after";
@if $border {
$ab: $ab + ", " + $selector + ":before";
}
#{$ab} {
#{$inverse}: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#{$selector}:after {
border-#{$inverse}-color: $box_color;
border-width: $arrow_size;
#{$sideway}: 50%;
margin-#{$sideway}: -$arrow_size;
}
@if $border {
#{$selector}:before {
border-#{$inverse}-color: $border_color;
border-width: $cumul;
#{$sideway}: 50%;
margin-#{$sideway}: -$cumul;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment