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.
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.
scale(0.1)for in the output code?
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.