Css Triangle Generator

Create pure-CSS triangles using the classic border trick — no SVG, no images. Pick one of eight directions, set the width and height in pixels, choose a color, and copy a self-contained .triangle { width: 0; height: 0; ... } rule that renders the shape entirely from transparent and colored borders.

1. Click a Direction button (up, down, left, right, or one of the four corners: top-left, top-right, bottom-left, bottom-right). 2. Pick the triangle Color with the color picker. 3. Drag the Width (10–200px) and Height (10–200px) sliders. 4. Copy the generated CSS from the code panel.

up / down / left / right produce equilateral-ish isosceles triangles pointing in that direction, built from two equal transparent borders and one colored border. top-left, top-right, bottom-left, bottom-right produce right-angled corner triangles using one colored border and one transparent border. The output always sets width: 0 and height: 0 on the .triangle class.