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.

FAQ

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 our clip-path generator 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.

How does the grid work?

When you have Snap To Grid enabled, it will automatically generate some useful lines, circles and points for creating right angle triangles, isosceles triangles and equilateral triangle.

What other controls are there?

• Hold shift while dragging to temporarily disable the grid
• Hold shift while clicking to select two corners
• Drag a box around two corners to select both
• Click on an edge to select two corners
• Drag the whole shape
• Undo (Ctrl+Z or ⌘+Z)
• Redo (Ctrl+Y or ⌘+⇧+Z)
• New (Ctrl+N or ⌘+N)
• Save (Ctrl+S or ⌘+S)
• Copy The Snippet (Ctrl+C or ⌘+C)
• Share your creation using a permanent link