A pencil drawing a triangle

Drawing a triangle with CSS

Alvaro Montoro
5 min readMar 23, 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 borders and two more modern options with clip-path and linear-gradient().

Using border

This is the “classic” way of drawing a triangle in CSS, and it seems like the most popular one by far. It consists of having a single colored border…

--

--

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro