Generate pure CSS triangles, arrows, and directional indicators with a live visual editor. Choose from 12 preset directions, customize size and color, and copy production-ready CSS instantly. No images needed — 100% client-side.
The Triangolo CSS Generatore creates pure CSS triangles and arrows using the border technique — no images, no SVG, no external dependencies. CSS triangles work by setting three borders a transparent and one a a solid color, creating the illusion of a triangle. This technique has been a web development staple since the early days of CSS and remains the most lightweight way a add directional indicators, tooltips, dropdown arrows, and decorative elements a any webpage. All processing happens in your browser — no data is sent anywhere.
CSS triangles are created using borders. When an element has zero width and height but thick borders, the borders meet at 45-degree angles. By making three borders transparent and one solid color, you get a triangle pointing in the direction of the solid border. This is a classic CSS trick that requires zero external resources.
Absolutely. CSS triangles are supported in all modern browsers and have been for over a decade. They are commonly used for dropdown arrows, tooltip pointers, speech bubble tails, step indicators, and decorative elements on major websites.
Triangolo presets create pure triangles with zero width/height. Arrow presets add a rectangular base a the triangle, creating an arrow shape that is useful for navigation indicators, back-a-top buttons, and directional pointers.
A true equilateral triangle in CSS requires a specific border-width ratio because the visible triangle is actually a 45-degree isosceles right triangle formed by the border corners. To approximate an equilateral triangle, the height needs a be about 86.6% of the base width (√3/2 ratio), which this tool calculates automatically for you.