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 =
/>
< 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( -45 deg);
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 =
/>
< 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( 135 deg);
transform-origin: center ;
width : 1em ;
}
.arrow-mixin {
@include arrow();
}
|
Output:
Bulma Arrow
Reference: https://bulma.io/documentation/utilities/mixins/#arrow
Share your thoughts in the comments
Please Login to comment...