Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-triangle();).
The Triangle Sass mixin helps you generate triangles using the ::before or ::after CSS pseudo-elements.
Arguments
| Name | Type | Description |
|---|---|---|
$direction | string | Sets the direction of the triangle. Accepts the values top, top-right, right, bottom-right, bottom, bottom-left, left, and top-left. |
$color | color | The color of the triangle. |
$size | number (with unit) | The size of the triangle. Multiple values must be separated by a space. |
When you pass the top, right, bottom, or left values for the $direction argument, you can pass two values to resize the triangle. The first value controls the width of the triangle and the second controls the height.
Examples
Suppose you have an expandable box and you want users to click a label to expand it. Let's apply the mixin to the ::after pseudo-element of the selected element.
<div class="element">Click here to expand it!</div>.element {
&::after {
@include triangle;
}
}.element::after {
content: "";
height: 0;
width: 0;
display: inline-block;
border-style: solid;
border-color: black transparent transparent;
border-width: 8px 5px 0;
}Now let's change the $color and the $size of the triangle, and separate it from the text by passing a declaration block into the mixin.
.element {
&::after {
@include triangle(
$color: crimson,
$size: 6px
) {
margin-left: 6px;
};
}
}.element::after {
content: "";
height: 0;
width: 0;
display: inline-block;
border-style: solid;
border-color: crimson transparent transparent;
border-width: 6px 3px 0;
margin-left: 6px;
}When you pass one of the top, right, bottom, or left values for the $direction argument, you can pass a second value to resize the triangle. The first value controls the width of the triangle and the second controls the height.
.element{
&::after {
@include triangle(
$direction: "bottom",
$color: crimson,
$size: 10px 6px
) {
position: relative;
margin-left: 6px;
top: -2px;
};
}
}.element::after {
content: "";
height: 0;
width: 0;
display: inline-block;
border-style: solid;
border-color: crimson transparent transparent;
border-width: 6px 5px 0;
position: relative;
margin-left: 6px;
top: -2px;
}You can apply the mixin not only to the pseudo-elements, but to the selected element itself.
.element{
@include triangle(
$direction: "top",
$color: crimson,
$size: 100px 50px
)
}.element {
content: "";
height: 0;
width: 0;
display: inline-block;
border-style: solid;
border-color: transparent transparent crimson;
border-width: 0 50px 50px;
}