CSS-Dreieck-Generator Erstellen Sie CSS-Dreiecke mit der Border-Technik und steuern Sie Richtung und Farbe.

🎨

CSS-Dreieck-Generator

Erstellen Sie CSS-Dreiecke mit der Border-Technik und steuern Sie Richtung und Farbe.

Richtung wählen

Wählen Sie die Richtung, in die das Dreieck zeigen soll: nach oben, unten, links oder rechts.

Größe und Farbe anpassen

Passen Sie die Größe des Dreiecks an und wählen Sie Ihre gewünschte Farbe.

CSS kopieren

Vorschau des Dreiecks anzeigen und den border-basierten CSS-Code kopieren.

Loading tool...

What Is CSS-Dreieck-Generator?

Der CSS-Dreieck-Generator erstellt Dreiecke mithilfe der CSS-Rand-Technik, einem der cleversten Tricks in CSS. Durch die Einstellung der Breite und Höhe eines Elements auf Null und das Verwenden von transparenten Rändern an drei Seiten mit einem farbigen Rand auf einer Seite wird eine Dreiecksform gebildet. Mit diesem Tool können Sie die Richtung des Dreiecks (nach oben, nach unten, nach links, nach rechts) wählen, seine Größe anpassen und jede Farbe auswählen. Der generierte CSS-Code ist leicht und benötigt keine Bilder oder SVG. CSS-Dreiecke werden häufig für Tooltip-Pfeile, Dropdown-Indikatoren, Brotkrumen-Trenner und dekorative Designelemente verwendet. Die Vorschau zeigt das Dreieck in Echtzeit an, und der Code kann direkt in Ihre Stylesheet kopiert werden.

Why Use CSS-Dreieck-Generator?

Keine Bilder erforderlich - reine CSS-Bordertechnik
Vier Richtungsoptionen mit anpassbarer Größe
Leichtgewichtiges und leistungsfähiges Alternativ zu bildbasierten Pfeilen
Sofortige Vorschau und ein-Klick-Code-Kopie

Common Use Cases

Tooltip-Pfeile

Erstellen Sie den Pfeilzeiger für CSS-Tooltips und Popover.

Dropdown-Indikatoren

Fügen Sie Dreiecksindikatoren zu Dropdown-Menüs und -Selectoren hinzu.

Breadcrumb-Trenner

Verwenden Sie Dreiecke als visuelle Trenner in Breadcrumb-Navigation.

Dekorative Elemente

Fügen Sie geometrische Formen zu Abschnittstrennern und Design-Akzenten hinzu.

Technical Guide

Die CSS-Dreieck-Technik nutzt aus, wie Ränder sich an den Ecken von Elementen treffen. Wenn ein Element eine Breite und Höhe von Null hat, bilden die Ränder dort, wo sie sich treffen, dreieckige Formen. Durch das Machen von drei Rändern transparent und einem farbigen Rand wird ein Dreieck in die entgegengesetzte Richtung des farbigen Rands erstellt. Zum Beispiel erzeugt border-bottom: 50px solid blau mit transparenten linken und rechten Rändern ein nach oben zeigendes Dreieck. Die Größe des Dreiecks wird durch die Randbreitenwerte gesteuert. Für gleichseitige Dreiecke sollten alle Randbreiten gleich sein. Für gleichschenklige Dreiecke kann der farbige Rand eine andere Breite haben. Diese Technik kann auch rechtwinklige Dreiecke erstellen, indem nur ein angrenzender Rand transparent gemacht wird. CSS-Dreiecke werden scharf in jeder Auflösung gerendert und werden in allen Browsern unterstützt.

Tips & Best Practices

1
Das Dreieck zeigt in die entgegengesetzte Richtung der farbigen Borderrichtung
2
Verwenden Sie passende Border-Breiten für gleichseitige Dreiecke
3
Kombinieren Sie mit ::before oder ::after-Pseudo-Elementen für inline-Pfeile
4
CSS-Dreiecke können mit transform für benutzerdefinierte Winkel gedreht werden

Related Tools

CSS-Tooltip-Generator

Erstellen Sie reine CSS-Tooltips mit anpassbarer Position, Pfeil, Farben und Stil.

🎨 CSS & Design

CSS-Clip-Path-Generator

Erstellen Sie CSS-Clip-Path-Formen mit Voreinstellungen für Polygone, Kreise und Ellipsen.

🎨 CSS & Design

CSS-Blob-Generator

Erstellen Sie organische Blob-Formen als SVG mit Farbverläufen und Zufälligkeit.

🎨 CSS & Design

CSS-Trenner-Generator

Erstellen Sie CSS-Abschnittstrenner mit mehreren Stilen, einschließlich Gradient, Schatten und Zickzack.

🎨 CSS & Design

Frequently Asked Questions

Q Wie funktioniert die CSS-Dreiecktechnik?

Indem Sie Breite/Höhe auf 0 setzen und transparente Border auf drei Seiten mit einer farbigen Border auf einer Seite verwenden, bilden die Border eine Dreiecksform.

Q Kann ich Dreiecke mit benutzerdefinierten Winkeln erstellen?

Verwenden Sie CSS transform: rotate() auf einem Standard-Dreieck, um es in jeden Winkel zu drehen.

Q Sind CSS-Dreiecke responsiv?

Border-Breiten in Pixeln sind fest. Verwenden Sie Viewport-Einheiten (vw, vh) oder JavaScript für responsives Größenanpassen.

Q Kann ich andere Formen mit Border erstellen?

Ja, indem Sie Border-Breiten und Transparenz variieren, können Sie verschiedene Formen einschließlich Pfeilen und Chevron erstellen.

Q Gibt es eine moderne Alternative zu Border-Dreiecken?

Ja, clip-path: polygon() bietet flexiblere Formenerstellung mit besserer Lesbarkeit.

About This Tool

CSS-Dreieck-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.