CSS Triangle Generator

CSS Triangle Generator is a free, browser-based tool for creating pure-CSS triangles using the classic border trick. Select a direction from the 8-point compass grid, pick your size and colour, see an instant live preview on a checkerboard background, and copy the generated CSS rule in one click.

CSS triangles are used throughout web UIs: tooltip arrows, dropdown carets, decorative dividers, speech bubble tails, loading indicators, and navigation breadcrumb separators. Because they use only borders — no images, no SVG, no pseudo-element canvas — they scale perfectly, load instantly, and are fully customisable via CSS variables.

The checkerboard preview background (adapted from the pattern CSS uses to indicate transparency in image editors) makes it obvious which borders are structural-transparent vs. the visible coloured border that forms the triangle shape.

• Direction — click any of the 8 arrows in the compass grid to set which way the triangle points. Cardinal directions (↑↓←→) create symmetrical triangles. Diagonal directions (↖↗↙↘) create right-angle corner triangles.
• Width — the horizontal span of the triangle. For up/down triangles this is the base width; for left/right triangles it's the triangle's height.
• Height — the vertical span. For up/down triangles this is how tall the triangle is; for left/right it's the base width.
• Quick Presets — jump to common sizes (32 px, 64 px, 100 px) or shape ratios (Wide for flat triangles, Tall for narrow ones).
• Click Copy CSS to get the .triangle rule. Paste it into your stylesheet and apply the class to any empty <div>.

A CSS triangle is created by setting an element to zero width and height, then exploiting how CSS renders borders. When an element has zero dimensions and multiple borders meet at a corner, each border is drawn as a trapezoid that fills the corner. When only one border is given a colour and the adjacent borders are transparent, that trapezoid becomes a triangle.

For a pointing-up triangle: the left and right borders are set to half the desired width each and coloured transparent. The bottom border is set to the full height and given the visible colour. The result is a triangle pointing upward.

For corner triangles (diagonal): only two adjacent borders are needed — one coloured, one transparent. Since there are only two borders, no "trapezoid averaging" occurs and the shape is a true right-angle triangle filling the corner of the box.

Width and height are computed like this:

• Up/down: border-left = border-right = width÷2, border-bottom/top = height
• Left/right: border-top = border-bottom = height÷2, border-right/left = width
• Corner: both borders equal the respective dimension — no halving needed

These elements have zero width and height — so their invisible CSS box occupies no page space. This means you may need to position them with absolute/relative positioning or inline-block spacing depending on usage.