CSS Triangle Generator

Summary

Choose direction and size to get the CSS border code for a pure CSS triangle.

How it works

1. Select triangle direction (up, down, left, right)
2. Set width, height, and color
3. Click Generate
4. Copy the CSS output

Use cases

• Tooltip pointer arrows
• Decorative section dividers
• Navigation arrow indicators

Frequently Asked Questions