How to Use CSS Triangle Generator

About this tool

Generate a triangle using CSS borders, with direction, size and color controls.

How to use CSS Triangle Generator

1. Select a Direction.
2. Set Width, Height and Color while inspecting the preview.
3. Copy the CSS and apply it to the intended decorative element.

Worked example

Create a small downward triangle as a menu indicator.

Is this a scalable vector file?

No. It is a CSS border technique. Change its CSS dimensions when a different size is needed.

Can I use the triangle as an accessible button alone?

A visual shape does not provide a control name or behavior. Add suitable semantic HTML and an accessible label for interactive use.

Put this guide into practice

• CSS Triangle Generator — Generate pure CSS triangles in any direction and size.