Navigate back to the homepage

How to create a triangle in CSS

Edwin Torres
May 20th, 2020 · 1 min read

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.

Cheers and keep learning! 🍻

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Edwin Torres

The Complete Web Developer in 2020

These are my personal notes in the Udemy Course, The Complete Web Developer in 2020.

May 7th, 2020 · 4 min read

Learning to learn

These are my personal notes in the Udemy Course, Learning to Learn by Andrei Neagogie.

May 2nd, 2020 · 10 min read
© 2020 Edwin Torres
Link to $https://github.com/codesandtagsLink to $https://www.instagram.com/ed_traveler/Link to $https://www.linkedin.com/in/edwintorresdeveloper/