CSS Triangle Generator

A free online visual builder for pure border-based CSS triangles. Select pointing directions (up, down, left, right, top-left, top-right, etc.), adjust size constraints (width and height in pixels), and choose custom colors. Instantly preview the generated CSS arrow shape and copy the optimized HTML and CSS code blocks directly to your clipboard.

CSS Border Triangles: Standard HTML block elements have rectangular boundaries. Setting both width and height to 0 and combining transparent borders with one colored border creates perfect diagonal vectors.

Shape Controls

Pointing Direction

Width (px)100px

Height (px)100px

Triangle Color

CSS Preview

Generated CSS Rules

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #065f46;

Related Design Tools

Color Converter (HEX / RGB / HSL)

Convert colors between HEX, RGB, HSL, and CMYK formats.

Image Compressor

Compress images in your browser — JPEG, WebP, PNG. No uploads.

Color Palette Generator

Generate complementary, analogous and triadic palettes from any colour.

Browse all Design tools →