Animation of How CSS Triangles Work

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

In talks I’ve given in the past, I’ve found myself explaining how CSS triangles work with words and ridiculous hand gestures. It never goes particularly well.

Y’all got that?

So I figured let’s give it a shot with an actual on-screen in-code animation. Here we go:

See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen

The root of the trick is that borders on elements meet each other at angles. So if one is transparent and the other isn’t, it appears as if the whole shape is a triangle. You can turn “on and off” different borders and use different heights/widths to get different triangle shapes pointing different directions.

Of course you can get all kinds of crazy with CSS and only one element. The triangle is just always particularly compelling because it’s so practical.