CSS-Dreieck-Generator

Der CSS-Dreieck-Generator ist ein interaktives Tool, mit dem Sie reine CSS-Dreiecke ohne Bilder oder SVG erstellen können. Er nutzt den CSS-Border-Trick, um Dreiecke in 8 Richtungen (oben, unten, links, rechts und vier diagonale Richtungen) mit anpassbarer Größe und Farbe zu erzeugen. Der generierte CSS-Code kann direkt in Ihr Projekt kopiert werden.

Wählen Sie eine Dreieck-Richtung aus den Richtungs-Buttons (oben, unten, links, rechts oder diagonal). Passen Sie Breite und Höhe mit den Schiebereglern an, um die Dreiecksabmessungen zu steuern. Wählen Sie eine Farbe mit der Farbauswahl. Die Vorschau wird in Echtzeit aktualisiert, und der generierte CSS-Code erscheint unten. Klicken Sie auf die Kopiertaste, um das CSS in die Zwischenablage zu kopieren.

CSS-Dreiecke verwenden eine clevere Technik mit Rahmen. Wenn ein Element die Breite und Höhe Null hat, treffen seine Rahmen im Mittelpunkt zusammen. Indem Sie einige Rahmen transparent und andere farbig machen, entsteht die Illusion eines Dreiecks. Ein nach oben zeigendes Dreieck verwendet beispielsweise transparente linke und rechte Rahmen mit einem farbigen unteren Rahmen. Die Rahmenbreiten bestimmen die Größe und Proportionen des Dreiecks.

Der Generator unterstützt 8 Richtungen: oben, unten, links, rechts, oben-links, oben-rechts, unten-links und unten-rechts. Diagonale Dreiecke verwenden nur zwei statt drei Rahmen und erzeugen eine rechtwinklige Dreiecksform. Die Breite steuert die Basis des Dreiecks, die Höhe bestimmt die Spitze. Für ein perfekt gleichschenkligen Dreieck setzen Sie Breite und Höhe auf denselben Wert.

CSS-Dreiecke werden häufig für Tooltip-Pfeile, Dropdown-Menü-Zeiger, Sprechblasen-Spitzen, Breadcrumb-Trennzeichen und dekorative Elemente verwendet. Sie sind leichtgewichtig, erfordern keine zusätzlichen HTTP-Anfragen und skalieren bei jeder Auflösung perfekt. Kombinieren Sie sie mit CSS-Transitions und Transforms für flüssige Animationen.