markjohnson4

//==== Simple SCSS mixin to create CSS triangles
//==== Example: @include css-triangle ("up", 30px, 10px, #fff);  This would make a wide/short triangle
@mixin css-triangle ($direction: "down", $width: 20px, $height: 20px, $color: #000) {
    width: 0; 
    height: 0;
    border-left: #{setTriangleSize($direction, "left", $width, $height)} solid #{setTriangleColor($direction, "left", $color)};
    border-right: #{setTriangleSize($direction, "right", $width, $height)} solid #{setTriangleColor($direction, "right", $color)};
    border-bottom: #{setTriangleSize($direction, "bottom", $width, $height)} solid #{setTriangleColor($direction, "bottom", $color)};
    border-top: #{setTriangleSize($direction, "top", $width, $height)} solid #{setTriangleColor($direction, "top", $color)};
}

markjohnson4

//==== Simple SCSS mixin to create CSS triangles
//==== Example: @include css-triangle ("up", 10px, #fff);
@mixin css-triangle ($direction: "down", $width: 20px, $height: 20px, $color: #000) {
    width: 0; 
    height: 0;
    border-left: #{setTriangleSize($direction, "left", $width, $height)} solid #{setTriangleColor($direction, "left", $color)};
    border-right: #{setTriangleSize($direction, "right", $width, $height)} solid #{setTriangleColor($direction, "right", $color)};
    border-bottom: #{setTriangleSize($direction, "bottom", $width, $height)} solid #{setTriangleColor($direction, "bottom", $color)};
    border-top: #{setTriangleSize($direction, "top", $width, $height)} solid #{setTriangleColor($direction, "top", $color)};
}