Mixins
triangle
Draws a triangle from the current element.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| $inline-size * | number | — | Triangle inline size. |
| $block-size * | number | — | Triangle block size. |
| $direction * | string | — | The keyword describing the triangle direction. |
| $color | color | currentColor | Triangle color. |
List of direction keywords:
| Keyword | Figure |
|---|---|
top | ▲ |
bottom | ▼ |
left | ◀ |
right | ▶ |
bottom-left | ◣ |
bottom-right | ◢ |
top-left | ◤ |
top-right | ◥ |
Example
@use 'more-sass' as more;
.element-one {
@include more.triangle(10px, 8px, 'top');
}
.element-two {
@include more.triangle(14px, 18px, 'bottom-left', #148cd7);
}
.element-one {
display: block flow;
inline-size: 10px;
block-size: 8px;
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.element-two {
display: block flow;
inline-size: 14px;
block-size: 18px;
background: #148cd7;
clip-path: polygon(0 0, 0 100%, 100% 100%);
}