Skip to Content

arrow()

Create a triangle/arrow on an element.

Sass February 22, 2017

Usage

Sass
arrow($side, $align, $size, $color, $borderColor, $borderSize)

Parameters

$side
(Optional) (String) Which side the arrow appears on
Default: right

$align
(Optional) (String) The alignment of the arrow
Default: center

$size
(Optional) (String) The size of the arrow
Default: 20px

$color
(Optional) (String) The color of the arrow
Default: #f6f6f6

$borderColor
(Optional) (String) The border color of the arrow
Default: none

$borderSize
(Optional) (String) The border thickness
Default: 3px

Request or provide clarification »

Examples

Sass
.element-solid {@include arrow('top','left', 10px, #4fade3);}
Sass
.element-border {@include arrow('top','left', 10px, #eee, #4fade3, 6px);}

Source File

Located in /assets/scss/partials/_mixins.scss on line 285.

Sass
@mixin arrow($side: "right", $align: "center", $size: 20px, $color: #f6f6f6, $borderColor: "none", $borderSize: 3px) {
    $selector: "&:after, &:before";
    @if $borderColor == "none" {
        $selector: "&:after";
    }
    #{$selector} {border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible;}
    &:after {border-width: $size; @include arrow_helper($size, $color, $size, $side, $align);}

    @if $borderColor != "none" {
        &:before {border-width: $borderSize + $size; @include arrow_helper($size + $borderSize, $borderColor, $size - $borderSize, $side, $align);}
    }
}

Override

To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

Sass
@mixin arrow($side, $align, $size, $color, $borderColor, $borderSize){
    //Write your own code here, leave it blank, or return false.
}