triangle

Draws a triangle from the current element.

Arguments

Name	Type	Default	Description
$width *	`number`	—	Triangle width.
$height *	`number`	—	Triangle height.
$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 {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid currentColor;
}

.element-two {
    border-right: 14px solid transparent;
    border-bottom: 18px solid #148cd7;
}