CSS Triangle Generator
Generate CSS triangles using the classic border trick — no images, no SVG. Pick direction, size and color.
CSS generated is free to use — no attribution required.
How do CSS triangles work?
Setting an element to width: 0; height: 0 and applying a colored border on one side while making adjacent borders transparent creates a triangle. The size of the triangle is controlled by the border width.
What is the CSS triangle syntax?
For an upward-pointing triangle: border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid #6366f1. Swap border-bottom for border-top to point down, etc.
How do you create diagonal CSS triangles?
Diagonal (corner) triangles use only two borders instead of three. For a top-right triangle: border-top: 40px solid #6366f1; border-left: 40px solid transparent.
What is the modern CSS alternative to the border triangle trick?
In modern CSS, clip-path: polygon(50% 0%, 0% 100%, 100% 100%) is a simpler alternative that also lets you add background colors, gradients and borders to the triangle.