CSSAWWWARDS
+ Submit tool
Built-in toolFree · No signup

CSS Triangle Generator

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.

Share:

Method

Direction

40px
#1D9E75

Preview

Border trick — works in all browsers

CSS Output
/* CSS Triangle — Up (Border Trick) */.triangle {  width: 0;  height: 0;  border-left: 40px solid transparent;  border-right: 40px solid transparent;  border-bottom: 40px solid #1D9E75;}

How to use

01

Pick a direction

Choose from 8 triangle directions — Up, Down, Left, Right, and the four diagonal corners.

02

Choose method

Border trick uses transparent borders to create triangles and works in all browsers. Clip-path is cleaner but needs a background colour.

03

Set size & colour

Drag the size slider and pick your triangle colour using the colour picker.

04

Copy CSS

Click Copy CSS to get the complete declaration block ready to paste into your stylesheet.