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:
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
Support
If you want to support further development of this project consider becoming a sponsor
Inspired by:
https://dev.to/adriantwarog/learn-how-to-make-a-triangle-in-css-once-and-for-all-2pfe
Top comments (8)
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:
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.
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
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
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.
That's beautiful.