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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
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.
Why & How I built css.gg - A life story.
Astrit ・ Dec 22 '19 ・ 8 min read
Nice stuff!
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.