sass-triangle

Mixin for creating CSS triangles.

Installation

npm install --save sass-triangle

Usage

@import "sass-triangle";

.triangle-1 {
  @include triangle(up, 20px, $color: #ffe619); //20px wide and 20px high
}

.triangle-2 {
  @include triangle(down, 20px 20px, $color: #ff3005); //20px wide and 20px high
}

.triangle-3 {
  @include triangle(left, 20px 10px, $color: #ffaf14); //20px wide and 10px high
}

.triangle-4 {
  @include triangle(down, 20px 5px, $color: #ff1870); //20px wide and 5px high
}

.triangle-5 {
  @include triangle(right, 20px 10px 5px, $color: #ff28ca, $before: true); //weird! three different border sizes makes 10px high and 25px wide
}