Animation of How CSS Triangles Work

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.