DEV Community

Cover image for πŸ’… How to create a triangle in CSS
Edwin Torres
Edwin Torres

Posted on

5 1

πŸ’… How to create a triangle in CSS

A couple of days before, I had to face this common challenge, however, there are many solutions (using images, using divs, and using pseudo-elements with and empty content). For me, the best solution was using pseudo-elements, so that here is my solution.

If you want to read more about this common pattern, please review this article in CSS Tricks (One of the best pages for CSS Content).

Understanding ::before and ::after pseudo-elements in CSS

In few words a pseudo-element is :

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

Creating the triangle

After understanding the above concept, it means we can add some content, or create another element given a selector.
In our case, if we define a border-width and we have an empty content, the border will start from the center of the element.

Then, pretty much we need to play with the border-color, border-width and the position:absolute to create our triangle. Below, you will find a couple of examples in my codepen.

What's the next?

Well, I think that's all using a short example. Given the above examples, you can add letters, transformations, animations, and whatever you can imagine, using the pseudo-elements.

To get a complete list, please check the documentation and don't forget review the compatibility with browsers.

If you want to see my original post, you're welcome here.

Cheers and keep learning! 🍻

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more