Pure CSS outlined triangle using only borders △△△△△△△
Publish Date: Feb 20 '20
26 8
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.
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}
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.
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:
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.
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...
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.
With either approach, how do we change the triangle size, but keep the same border thickness?
A benefit of CSS is we have CSS variables, calc(), etc. It would be sweet if we had some more options like:
--gg-width
--gg-height
--gg-triangle-border-size
or similar, where width would be the width of the base, and height the line from mid base to the tip, to make it really easy to size the triangle with constant "border" size, making it really easy to fit into any HTML layout but without the whole thing being scaled.
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!
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.
That's beautiful.