CSS Triangle Generator
Create CSS triangles and arrows without images using the border trick
CSS triangles are created using the border trick: an element with zero width and height, where one border is colored and the adjacent borders are transparent. The colored border forms the triangle shape, and the size is controlled by the border widths.
CSS Triangle Directions
Cardinal Directions | Create triangles pointing up, down, left, or right. Perfect for tooltips, dropdowns, and navigation arrows.
Diagonal Directions | Generate corner triangles pointing top-left, top-right, bottom-left, or bottom-right. Ideal for decorative corners and ribbon effects.
How It Works
The Border Trick | CSS triangles use an element with zero width and height. The visible triangle is formed by a colored border, while adjacent transparent borders create the shape.
Instant Export | Copy the generated CSS code with one click. The live preview updates in real-time as you adjust the triangle parameters.