Como 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.
Também pesquisado como: css triangle, css arrow, tooltip arrow css, border triangle css, css caret, triangle shape css, speech bubble arrow css.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o CSS Triangle Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Triangle Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.