Neophobe Plebeian Mumpsimus

    postcss-triangle
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    postcss-triangle

    NPM version npm license Travis Build Status codecov Dependency Status

    npm

    PostCSS plugin to create a triangle.

    Introduction

    Creating triangles in CSS is entirely complicated, but it doesn't have to be!

    Using this plugin, you can create three different types of triangles:

    .isosceles-triangle {
        triangle: pointing-<up|down|left|right>;
        width: <length>;
        height: <length>;
        background-color: <color>;
    }
     
    .right-isosceles-triangle {
        triangle: right-iso pointing-<up|down|left|right>;
        <width|height>: <length>;
        background-color: <color>;
    }
     
    .equilateral-triangle {
        triangle: equilateral pointing-<up|down|left|right>;
        <width|height>: <length>;
        background-color: <color>;
    }

    Triangle types

    All triangle types have the following rules/caveats:

    • You must specify a direction (pointing-up, pointing-down, pointing-left or pointing-right).
    • You must provide a separate background-color declaration. This will transpile into a border-color in the opposite direction in which your triangle points. The background-color helps you forget about all that nonsense and just specify what appears to be the background color, visually.
    • Unfortunately, there is no way to set a triangle's actual border at this time. I considered using the ::before pseudo-class to achieve this; however, it had a defect that was cutting it in half and I gave up. Feel free to submit a pull request with this feature if you have a solution for it.

    Now, on to the triangle types!

    Isosceles

    Isosceles Triangle (Default)

    This is the default triangle type. It has two angles the same and two sides the same. The triangle will fit snug inside the width and height box that you define. Here's how you create one:

    .isosceles-triangle {
        triangle: pointing-right;
        width: 150px;
        height: 115px;
        background-color: red;
    }

    This transpiles into:

    .isosceles-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        border-width: 57.5px 0 57.5px 150px;
        border-left-color: red;
    }

    See it on CodePen!

    This creates a triangle with width: 150px; height: 115px; and pointing right.

    The isosceles triangle has the following rules/caveats:

    • You must specify both a width and height.

    Right-Isosceles

    Right-Isosceles Triangle

    This triangle has two 45° angles and one 90° angle. The 90° angle is the direction the triangle points. This is great if you want to render a triangle with the sharpest edge possible, because it follows the pixels on your screen exactly, without any additional anti-aliasing.

    Iso is short for isosceles, because it's not the most fun word to spell/type; rather, it's only fun if you know how to spell it!

    Here's how you create one:

    .right-isosceles-triangle {
        triangle: right-iso pointing-down;
        width: 250px;
        background-color: red;
    }

    This transpiles into:

    .right-isosceles-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        border-width: 125px 125px 0;
        border-top-color: red;
    }

    See it on CodePen!

    This creates a triangle with width: 250px; height: 125px; and pointing down.

    The right-isosceles triangle has the following rules/caveats:

    • You must specify either a width or a height.
    • You may not specify both a width and height, because it will calculate the missing dimension for you.

    Equilateral

    Equilateral Triangle

    This triangle's angles are all the same (60°). This means all sides are the same length as well. Here's how you create one:

    .equilateral-triangle {
        triangle: equilateral pointing-up;
        height: 100px;
        background-color: red;
    }

    This transpiles into:

    .equilateral-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        border-width: 0 57.73503px 100px;
        border-bottom-color: red;
    }

    See it on CodePen!

    This creates a triangle with width: 115.47006px; height: 100px; and pointing up.

    The equilateral triangle has the following rules/caveats:

    • You must specify either a width or a height.
    • You may not specify both a width and height, because it will calculate the missing dimension for you.

    That's about it!

    Installation

    $ npm install postcss-triangle
    

    Usage

    JavaScript

    postcss([ require('postcss-triangle')(/* options */) ]);

    TypeScript

    import * as postcssTriangle from 'postcss-triangle';
     
    postcss([ postcssTriangle(/* options */) ]);

    Options

    unitPrecision

    Type: number
    Required: false
    Default: 5

    When using right-iso or equilateral triangles, calculations will be performed that will most likely turn into fractions. This option allows you to control the number of significant digits after the decimal point (e.g., 1.2354 with a unitPrecision of 2 would yield 1.24, rounding it off nicely).

    Testing

    Run the following command:

    $ npm test
    

    This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

    Watching

    For much faster development cycles, run the following commands in 2 separate processes:

    $ npm run build:watch
    

    Compiles TypeScript source into the ./dist folder and watches for changes.

    $ npm run watch
    

    Runs the tests in the ./dist folder and watches for changes.

    Install

    npm i postcss-triangle

    DownloadsWeekly Downloads

    512

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • jedmao