CSS Triangle Generator
Design ToolsGenerate CSS triangles
Widthpx
Heightpx
Color
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;About CSS Triangle Generator
Generate CSS triangles with configurable direction, size, and color.
Frequently Asked Questions
How do CSS triangles work?
CSS triangles are created using the border trick on a zero-width, zero-height element. By setting one colored border and making the adjacent borders transparent, the browser renders a triangle shape. This technique avoids images or SVGs entirely.
What triangle directions are supported?
This tool supports 8 directions: up, down, left, right, and the four diagonal directions (top-left, top-right, bottom-left, bottom-right). Each direction adjusts which borders are colored and which are transparent.
Can I control the width and height of the triangle independently?
Yes. You can set separate width and height values to create equilateral, isosceles, or scalene triangles. The tool adjusts the border widths accordingly to produce the exact shape you need.
Is my data safe?
Yes! All processing happens entirely in your browser. Your data is never sent to any server. No data is collected, stored, or transmitted.
Why use CSS triangles instead of SVG or images?
CSS triangles load instantly with zero extra HTTP requests, scale perfectly at any resolution, and are easy to color-match with your design. They are ideal for tooltips, dropdowns, and decorative arrows.
Ad
728 × 90