Bulma Arrow

Last Updated : 28 Feb, 2022

In this article, we’ll see about Bulma Arrow. Arrow is a mixin in Bulma that is created with the help of SASS mixins. The Bulma framework uses SASS mixins for creating the custom CSS output. The arrow() is a mixin that creates an arrow icon or figures with the help of CSS.

Pre-requisite: CSS Preprocessor SASS

Bulma Arrow class: No specific class is mentioned in the official docs of Bulma rather we can create our own class and use it for styling the element with the help of SASS mixins.

Syntax:

<span class="arrow-mixin"></span>

.arrow-mixin {
    @include arrow();
}

Note: The output can only be shown if you know about running a SASS mixin as a CSS file (because SASS does not work in the browsers). Please check before proceeding for the examples.

Example 1: Below example illustrates the Bulma Arrow Mixin

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link
      rel="stylesheet"
      href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="container content "> 
        <h1 class="title">Bulma Arrow</h1> 
        <span class="arrow-mixin mt-6"></span> 
    </div> 
</body> 
    
</html>

CSS

@mixin arrow() { 
    border: 4px solid green; 
    border-radius: 2px; 
    border-right: 0; 
    border-top: 0; 
    display: block; 
    height: 2em; 
    pointer-events: none; 
    position: absolute; 
    top: 50%; 
    transform: rotate(-45deg); 
    transform-origin: center; 
    width: 2em; 
} 
  
.arrow-mixin { 
    @include arrow(); 
}

Output:

Bulma Arrow

Example 2: Another example illustrating Arrow Mixin

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link
      rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="container content "> 
        <h1 class="title">Bulma Arrow</h1> 
        <span class="arrow-mixin mt-6"></span> 
    </div> 
</body> 
    
</html>

CSS

@mixin arrow() { 
    border: 6px solid blue; 
    border-radius: 2px; 
    border-right: 0; 
    border-top: 0; 
    display: block; 
    height: 1em; 
    pointer-events: none; 
    position: absolute; 
    top: 50%; 
    transform: rotate(135deg); 
    transform-origin: center; 
    width: 1em; 
} 
  
.arrow-mixin { 
    @include arrow(); 
}