DEV Community

Drawing a triangle with CSS

Alvaro Montoro on March 24, 2021

In this post, we are going to see different methods to draw a triangle in CSS. We will focus on three in particular: the traditional method using b...

Read full post

Rob OLeary • Mar 24 '21

Coincidence --> dev.to/dailydevtips1/css-shapes-tr...

Same topic, same day!

Alvaro Montoro • Mar 24 '21

It can be. There has been some talk about triangles/shapes in CSS lately (at least 1 or 2 posts in the past week).

My post started with something I wrote on Twitter that got me roasted yesterday, mainly for making an absolute statement that people didn't agree with, so I wanted to add a longer explanation:

Álvaro Montoro

@alvaro_montoro

Don't use borders to make a triangle in CSS.

13:52 PM - 23 Mar 2021

Rob OLeary • Mar 24 '21

😅 The perils of expressing yourself on Twitter!

Sergey Khomushin • Mar 24 '21

Thank you for the article!
Using CSS borders, you can create any triangles of different angles (but not more than 90). It is not at all necessary to divide by 2 and be limited to only this.
jsfiddle.net/m0zwLdju/

Alvaro Montoro • Mar 24 '21

You are correct, that's not the only way to draw a triangle using the borders. I updated the article to add a note indicating that those are the steps for that specific triangle and other triangles will be slightly different:

Note: The steps above are for a specific triangle. The actual steps will change (slightly) depending on the type of triangle that we want to draw. In general, the idea is to set 2-3 borders as transparent and 1-2 borders with color and then adjust the border sizes.

Rob OLeary • Mar 24 '21

Another con for clip-path is that you can't use box-shadow to create a shadow (you can use filter: drop-shadow() instead).

Outside of the realm of CSS art, I reach for SVG most of the time.

Alvaro Montoro • Mar 24 '21

I agree, but one thing: clip-path will hide the shadow from a filter too.

Rob OLeary • Mar 24 '21

If you extend the clip-path beyond the base, you can include it.

Something like this gives you a 2px drop shadow..

 .triangle {
        background-color: red;
        width: 200px;
        height: 100px;
        margin: 0 auto;
        clip-path: polygon(50% 0%, 0% 200%, 100% 200%);
        filter: drop-shadow(0px 2px 0 black);
      }

jsfiddle.net/robjoeol/68d350zr/9/

Temani Afif • Mar 24 '21

one line triangle using conic-gradient : jsfiddle.net/mwfskaLx/1/.. useful if we want to think angles instead of dimension
Also with mask jsfiddle.net/mwfskaLx/2/ and jsfiddle.net/mwfskaLx/3/

Alvaro Montoro • Mar 24 '21

These are great options, and they would simplify considerably the background-image method. I had conic-gradient aside because Firefox didn't support it (not to mention IE). But that has changed now in FF, and this is a great use of it.

Calin Baenen • Mar 24 '21

This is a very creative post. I like it.

Alvaro Montoro • Mar 24 '21

Thanks!