Create CSS triangles using two methods: the classic border trick (works everywhere) or the modern clip-path approach. Choose from 8 directions, adjust size and colour, and copy ready-to-use CSS.
Method
Direction
Preview
Border trick — works in all browsers
Choose from 8 triangle directions — Up, Down, Left, Right, and the four diagonal corners.
Border trick uses transparent borders to create triangles and works in all browsers. Clip-path is cleaner but needs a background colour.
Drag the size slider and pick your triangle colour using the colour picker.
Click Copy CSS to get the complete declaration block ready to paste into your stylesheet.
