CSS Triangle Generator

This tool will help you generate a freeform triangle using only 1 HTML element and some simple CSS properties. You can move the 3 points wherever you want and it will fit the triangle to them. The points will snap to some useful lines to create right angle, isosceles or equilateral triangles.




Why can I only use a solid color? I wanted a triangle with a gradient/image instead.

This tool generates CSS triangles by manipulating the border widths of a 0 by 0 rectangle, and only applying a color to one side. At the moment, the border-image property can only be applied to all borders and cannot be applied to just one. If you want a pure CSS triangle with an image or gradient background, you could have a go with clippy to use the clip-path property instead.

What is the Increased Precision option and the scale(0.1) for in the output code?

The border-width property only works with whole numbers. If you were to set the border-width to 4.387px then your border will only be 4px wide. This lack of precision can make some CSS triangles slightly misaligned. To compensate this, the increased precision makes the triangle 10 times bigger and scales it 10 times smaller. This effectively gives us 1 extra decimal point in the border widths, which is enough for the triangle to align correctly. If this isn't important to you, you can turn the increased precision option off and benefit from slightly smaller CSS code.