loading...
Cover image for Pure CSS outlined triangle using only borders △△△△△△△

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

astrit profile image Astrit ・2 min read

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.

css.gg

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:

css.gg

.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
css.gg

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:

GitHub logo astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Inspired by:
https://dev.to/adriantwarog/learn-how-to-make-a-triangle-in-css-once-and-for-all-2pfe

Discussion

pic
Editor guide
Collapse
devmount profile image
Andreas

A very creative approach. Nevertheless I would recommend using an SVG here as it is widely supported today, scalable, customizable and much cleaner and lighter. You needed ~40 lines of code and >900 Byte. You could achieve the same result with SVG in 3 lines and 136 Bytes:

<svg height="200" width="300">
  <polygon points="150,30 250,150 50,150" style="fill:transparent;stroke:white;stroke-width:30" />
</svg>

Collapse
astrit profile image
Astrit Author

It is 100% true, however the idea behind css.gg is that all icons are made entirely on CSS perhaps not the best solution.
Also it can be compressed also with the rest of the style and minimal markup.

Collapse
devmount profile image
Andreas

the idea behind css.gg is that all icons are made entirely on CSS

What are the reasons/advantages for which you choose this approach?
Don't get me wrong: building 500+ Icons in CSS is impressive! But in my opinion using SVG is much more performant and usable...

Thread Thread
astrit profile image
Astrit Author

The idea was that you could compile the icons with the rest of style and less things to maintain, cleaner markup since all the major browsers support the features used on the icons, if you like to know more please read this article where I did explain everything.

Collapse
albannurkollari profile image
albannurkollari

One does not simply walk away without appreciating your efforts put on this rendering of a triangle just in CSS!
As many can come here to counter-argument the approach I think being versatile it's nothing but a benefit to both the developer and the community, providing another way of how one can achieve something. Also, there is nothing wrong about being a CSS freak/lover!

Check this out: codepen.io/cobra_winfrey/pen/aMLxMQ

Collapse
astrit profile image
Astrit Author

Thank you very much for the kind words Alban 🙏✌️.

I have seen quite some projects like the one you mentioned it means a lot for those who do it, and actually you learn during the process more than one could think.

Collapse
adriantwarog profile image
Adrian Twarog

That's beautiful.