Free tool

CSS Triangle Generator

Perfect triangles and arrows with the classic CSS border trick: pick a direction, tune the sizes and copy.

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #7c3aed;
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

Before clip-path and inline SVGs existed, the only way to draw a crisp triangle was a zero-by-zero div with thick transparent borders — the famous "border trick". It's still the lightest technique for tooltip arrows, speech bubbles and indicators, since it's just a few bytes of CSS and renders identically everywhere. This generator builds that CSS for you: choose one of eight directions (four cardinal plus four diagonal), adjust base and height with sliders, pick a color and copy the result. The preview sits on a checkered grid so you can verify angles and sizes before shipping it.

Features

  • ✓8 directions: cardinal and diagonal
  • ✓Independent width, height and color
  • ✓Grid-backed preview for measuring
  • ✓Pure CSS without images or SVG
  • ✓Works on every legacy browser

How to create a CSS triangle?

  1. 1

    Pick the direction

    Eight options: up, down, sides and the four diagonals.

  2. 2

    Tune base and height

    Width controls the base while height sets the tip.

  3. 3

    Choose the color

    Any valid CSS value; the preview applies it instantly.

  4. 4

    Paste the style

    Apply the .triangle class to whichever element should draw it.

Frequently asked questions

Why are width and height zero?

The triangle isn't content but the element's own border: with zero dimensions all four borders meet at the center and each draws as a trapezoid that visually forms the triangle.

Should I use clip-path instead?

For simple shapes and maximum support the border trick is unbeatable and works even in old browsers. If you need arbitrary angles or soft edges, clip-path or SVG give more control.

Is everything generated in my browser?

Yes, the CSS is composed locally from your options.

Related tools

Clip Path Maker

CSS shapes with draggable vertices.

CSS Gradient Generator

Linear, radial and conic gradients with presets.

Border Radius

Corners and organic blobs.

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

Embed CSS Triangle Generator on your site

Add CSS Triangle Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/css-triangle-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="CSS Triangle Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub