CSS Triangle

Generate CSS triangles with customizable direction, size, and color using the border trick. Live preview.

4 DirectionsLive PreviewCopy CSS

Direction

Size: 50px

Color

CSS Code

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #3B82F6;

FAQ

How do CSS triangles work?

CSS triangles use the border trick: set width and height to 0, make adjacent borders transparent, and the remaining border creates a triangle shape.

Which directions are supported?

Up, down, left, and right.

Can I customize the size?

Yes. Use the slider to adjust the triangle size from 10px to 150px.

Free online tools for images, PDFs, text, code, and more. All running in your browser.