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: