CSS Triangle Generator - Pure CSS Triangle Builder

Generate pure CSS triangles using the border trick

CSS Tools

Tool

Triangle Settings

direction

width (100px)height (80px)color

CSS

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #7c3aed;

How to Use

1Select a triangle direction (up, down, left, right)
2Adjust the width and height with sliders
3Pick a color for the triangle
4Copy the generated CSS code

Frequently Asked Questions

By setting an element's width and height to 0 and applying thick borders on the sides, the browser renders the border corners as diagonal lines — forming a triangle shape.

CSS triangles are purely decorative. If the triangle conveys meaning, add accessible alternatives such as an aria-label or visible text nearby.