DEV Community

Cover image for Stop using obsolete methods to create CSS Triangles! ⚠️
Temani Afif
Temani Afif

Posted on

Stop using obsolete methods to create CSS Triangles! ⚠️

The triangle is the most popular shape in CSS since years. If you google "how to create a triangle using CSS" you will get a ton of old and obsolete methods like using the border property 😫

⚠️ Stop using such methods ⚠️

I have created an online generator from where you can get the code of any CSS triangle with an optimized and modern code

👉 CSS Triangle Shapes 👈

You will find the basic triangle shapes but also more complex ones like the border-only and rounded corners triangles.

CSS-only Triangle

But how to create a triangle shape?

Creating a basic triangle is as simple as using 2 CSS properties: aspect-ratio and clip-path with a 3-point polygon. That's all!

Here is a figure to illustrate a few examples.

Creating a triangle using CSS

No pseudo-element, No border, No magic numbers, nothing complex! You set the ratio, you choose 3 points for your polygon and you are done.

To create the border-only and rounded corners variations, you will need a more complex code that I won't detail here to keep this article simple but I have another article where I explain them that I invite you to read.

I will repeat it again, Stop using obsolete methods to create triangle shapes! And if you don't want to write two lines of code, bookmark my online collection so you can easily get the code using one-click.

My collection doesn't contain all the triangle shapes so feel free to suggest any shape you struggle to create or you think deserve to belong in that collection. Let's have all of them in one place.

You want to support me?

buy me a coffee


Become a patron

Top comments (4)

link2twenty profile image
Andrew Bone

Border triangles did have their charm though, no?

I don't actually recommend ever doing this anymore 😅

afif profile image
Temani Afif

Such triangles belong into a museum for history purpose 🙃

ryanlwh profile image
Ryan Lee

Nice article. No more wrestling with border triangles.

framemuse profile image
Valery Zinchenko • Edited

That's nice, but do you have performance and compatibility comparison?