So nutzt du: 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.
Auch gesucht als: css triangle, css arrow, tooltip arrow css, border triangle css, css caret, triangle shape css, speech bubble arrow css.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich CSS Triangle Generator als Web-App installieren und offline nutzen?
Ja. CSS Triangle Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.