MakerBox

CSS Triangle Generator with Live Preview

Draw a pure-CSS triangle with the border trick — pick a direction, base width, height and colour, with no image or SVG needed.

CSS triangle generator

Preview

.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 40px solid #3b82f6;
}

The shape is the borders of an element with width: 0 and height: 0, so the element must stay empty — put text beside it, not inside. Width is the whole base and height the distance to the point; the generator splits the base into the two transparent borders for you.

Result: 7 lines, 154 characters

What this CSS triangle generator does

Triangles in CSS are made without images by giving an element zero width and height and coloring just one of its borders. Because each border meets its neighbors on a diagonal, a thick colored border sitting next to two transparent borders renders as a triangle. Choose the direction it should point, set the base width and the height, pick a color, and this tool builds the exact declaration block for you and shows a live preview so you can confirm the shape before you copy it. Everything updates instantly as you type.

How the border trick works

The colored border is always the one opposite the direction the triangle points: an upward triangle colors its border-bottom, a downward triangle colors its border-top, and left/right triangles color the opposite side border. The two perpendicular borders are set to transparent, and their combined thickness controls the base of the triangle while the colored border controls its length. The width you enter is split across the two transparent borders and the height becomes the colored border, so the visible triangle matches the size you asked for.

Frequently asked questions

Why use borders instead of an image or SVG?

A CSS border triangle needs no extra file, scales crisply at any size, inherits color easily, and adds zero network requests. It is a lightweight way to draw small arrows, tooltip pointers and dropdown carets directly in your stylesheet.

Can I change the triangle color with CSS later?

Yes. The color lives on a single border, so you can override it in a hover or dark-mode rule by setting that one border-color property — for example border-bottom-color for an upward triangle.