Jul 22, 2022 · 2 min read

Create a Triangle in Pure CSS - No JavaScript

Draw triangles in CSS using only the border trick - no images, no JS. Step-by-step code for up, down, left, and right arrows you can copy today.

In this post, we are going to see a simple method to draw a triangle in CSS using borders.

<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

Triangle Up #

Triangle is one of the simplest shapes in geometry. It can be drawn with just three straight lines and a couple of angles.

Set a width and height of 0.
Set the border color to transparent.
Set the top border to 0.
Set the side borders to half the width.
Set the bottom border to have the full height.
Set a color for the bottom border.

.triangle-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent; 
  border-bottom: 15px solid red;
}

Image description

Triangle Down #

.triangle-down {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid blue;
}

Image description

Triangle Left #

.triangle-left {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent; 
  border-right: 15px solid yellow; 
}

Image description

Triangle Right #

.triangle-right {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid green;
}

Image description

If you took over a project where the CSS is full of manual shape tricks instead of an icon library or SVGs, that complexity adds up fast. Our code quality evaluation guide helps you ask the right questions about decisions like these.

If you’re using Tailwind, see our dedicated guide on Tailwind CSS triangles. For layout help, check vertical centering with Tailwind.

Reading this because something is going wrong?

A free code audit gives you a written assessment of your codebase in plain English.

Get a Free Code Audit

Rated 4.8/5 on Clutch · you keep the write-up either way