Cómo usar: CSS Triangle Generator
- Click a direction — up, down, left, right or one of the corners.
- Set the width, height and color.
- Choose Borders (works everywhere, ideal for
::before/::afterarrows) or clip-path (easier to read, supports gradients). - Copy the CSS onto an element or pseudo-element.
Two ways to draw a triangle
The border trick: an element with zero width and height shows only its borders, and each border is a triangle meeting in the middle. Make three of them transparent and the fourth colored, and you get an arrow — no images needed. Its size comes from the border widths.
clip-path: a normal box with clip-path: polygon(50% 0, 100% 100%, 0 100%). Easier to read and size, and it can be filled with a gradient or image.
Tooltip arrow example
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}More shapes: Clip-path Generator, Border Radius Generator, SVG Blob Generator.
También se busca como: css triangle, css arrow, tooltip arrow css, border triangle css, css caret, triangle shape css, speech bubble arrow css.
Herramientas que combinan con: CSS Triangle Generator
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Preguntas frecuentes
How do I make a triangle in CSS?
Give an element width: 0 and height: 0, then set borders: for an up arrow, transparent left and right borders and a colored bottom border. This generator writes it for any direction and size.
How do I add an arrow to a tooltip?
Add a ::after pseudo-element with content: "", position it at the tooltip’s edge, and give it the triangle borders from the generator.
Border triangle or clip-path?
Borders work in every browser and are standard for tiny arrows on pseudo-elements; clip-path is easier to size and supports gradients.
Can a CSS triangle have a border or shadow?
Stack two triangles (one slightly larger in the border color), or use clip-path on a wrapper with filter: drop-shadow() for a shadow.
¿Puedo instalar CSS Triangle Generator como aplicación web y utilizarla sin conexión?
Sí. CSS Triangle Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.