How CSS triangles 🔺 are formed

Photo by Chris Lawton on Unsplash

So I stumbled upon a rather interesting explanation on how CSS triangles are formed and I thought I could also share it in an article. So here it goes:

CSS triangles are being used a lot around the web from dropdown menus indications to some very interesting visual rendition on the webs. Even here on medium, clicking on your avatar would show you a menu utilizing CSS triangle(You could click it now).

So what really are CSS triangles?

Most of the time, when you apply borders to an element, you usually make them thin say like 1px or 2px. But I implore you to observe what happens when you make the borders bigger like so:

You could see the border(I used different border colors here for demonstration purposes) for each side of the element forms a triangle(Pretty awesome right?) So all you have to do set a color for just the border you want and turn the rest “off”(by setting them to transparent mostly)

Note: The actual width and height of the triangle are determined by the width of the border, hence the box wouldn’t need to have the height or border properties set(or just set to 0).

Wrapping up the triangle

So I know it’s a quick one but it has served its purpose which is to give you an insight into how the triangles you see on your favorite apps her formed with CSS.

More Vitamins? You bet!

Happy Deploying 🚀 🚀 🚀