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.

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.

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.

OR