Skip to Content
Menu

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);}
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

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

    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.
    }