CSS Triangle Generator

CSS triangles are created using the border trick — an element with zero width and height and colored/transparent borders forms a triangle. This tool lets you pick the direction, size, and color, then instantly generates the CSS code.

Browse all Generator tools

How to Use

Select a direction (Up, Down, Left, Right, or diagonal), adjust the width and height sliders, pick a color, and copy the generated CSS. Paste it into your stylesheet and apply the .triangle class.

Common Use Cases

• •Creating arrow indicators and pointers in UI
• •Building tooltip arrows and dropdown carets
• •Designing decorative diagonal section dividers
• •Creating breadcrumb separators and chevron icons
• •Pure CSS speech bubbles with triangle tails