Pure CSS outlined triangle using only borders △△△△△△△

Doing the new icons for css.gg has been more difficult than I expected because I am reaching the limits of what I can do purely on CSS, as it is well known you can't create a Triangle on CSS without hacks such as border and nonetheless a outlined one.

Knowing that this could be a bit harder for beginners and in fact to share with you guys my approach I decided to create this mini tutorial.

First

Create the box with transparent borders on the side to create the angle which we will use later, for sake of demonstration will show side borders as semi transparent, on final step side borders should be transparent.

Border style breakdown



.gg-shape-triangle {
    display: block ;
    position: relative;
    box-sizing: border-box;
    width: 22px ;
    height: 17px;

    /*  01  */
    border-left-width: 3px;    
    border-left-style: solid;
    border-left-color: transparent;

    /*  02  */
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: transparent;

    /*  03  */
    border-down-width: 3px;
    border-down-style: solid;
    border-down-color: initial

}

Now will use pseudo selector "::before" to build a rectangle with left & top border, rotate it and skew so it can fit exactly with the bottom border of the parent it will look like this:



.gg-shape-triangle::before {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 20px;
    height: 20px;

    /*  Left Border */
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: initial;

    /*  Top Border */
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: initial;

    /*  Bottom Border */
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: transparent;

    /*  Rotate it to 45deg and skew  */
    transform: rotate(45deg) skew(10deg,10deg);

    /*  Position it until you meet the corners  */
    left: -2px;
    bottom: -13px
}

This is how the borders will overlap

The final style



.gg-shape-triangle {
    position: relative;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 17px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid
}
.gg-shape-triangle,
.gg-shape-triangle::before {
    display: block;
    box-sizing: border-box;
    border-right: 3px solid transparent
}
.gg-shape-triangle::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 3px solid;
    border-top: 3px solid;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg) skew(10deg,10deg);
    left: -2px;
    bottom: -13px
}

Benefits are that you can scale it with transform or use units such as "em".
Also use it over any background.

Stay tuned for the update.
Will share all what I learn along the way.

For more check the repo with all the icons:

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts.

CSS＊GG

A comprehensive, open-source CSS icons library.
Featuring Vanilla CSS, SVG and Figma UI icons

Now also a collection of well organised 6000 Unique Glyphs,
easy copy paste and available on the raycast extension.

Update 2024-08-26

The new version is live on the website, with a new design and a new way to browse the icons.
Soon to be released as a Figma plugin and the new version of the library.

Other resources: YouTube, Figma, Raycast, GLYF＊APP