Micro Tools
Advertisement

Triangle generator

Generate CSS triangles pointing any direction with the classic border trick. Set size and color, preview live, then copy the CSS.

Triangle settings

The border trick draws triangles with zero images.

Preview and CSS
Advertisement

Why borders make triangles

When an element has zero width and height, its four borders meet as diagonal wedges. Coloring one border and making the rest transparent leaves a single triangle. The colored border sits opposite the direction the triangle points: border-bottom draws an up triangle.

Keeping triangles equilateral

For a balanced look the height should be about 87 percent of the base width, which is the ratio of an equilateral triangle. This tool applies that ratio automatically so your triangles never look squat or stretched.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Triangle Generator FAQs

Can I make a right triangle instead?
Yes. Color two adjacent borders instead of one, for example border-top and border-right, with the other two transparent. You get a right triangle filling one corner of the box.
How do I add a triangle arrow to a tooltip?
Position the triangle absolutely at the tooltip edge with a negative offset, pointing outward. Match the triangle color to the tooltip background and it reads as one continuous shape.
Why does my triangle have blurry edges on retina screens?
Border triangles render crisply at any DPI since they are vector geometry. Blurriness usually comes from a fractional pixel size or a transform; round your sizes to whole pixels.
Can triangles be animated?
Yes, animate the border widths or rotate the element for spinner-like effects. For morphing between shapes, clip-path polygons transition more smoothly than border triangles.
Are border triangles better than SVG?
For simple UI arrows and carets, border triangles are fewer bytes and need no extra markup. For complex or multi-color shapes, SVG wins on flexibility and precision.
Advertisement