CSS-Dreieck-Generator - Reiner CSS-Dreieck-Ersteller

Generieren Sie reine CSS-Dreiecke mit dem Border-Trick

CSS-Werkzeuge

Tool

Triangle Settings

direction

width (100px)height (80px)color

CSS

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #7c3aed;

Anleitung

1Wählen Sie eine Dreiecksrichtung (oben, unten, links, rechts)
2Passen Sie Breite und Höhe mit den Schiebereglern an
3Wählen Sie eine Farbe für das Dreieck
4Kopieren Sie den generierten CSS-Code

Häufig gestellte Fragen

Indem man die Breite und Höhe eines Elements auf 0 setzt und dicke Ränder an den Seiten anwendet, rendert der Browser die Ecken der Ränder als diagonale Linien — und bildet so eine Dreiecksform.

CSS-Dreiecke sind rein dekorativ. Wenn das Dreieck eine Bedeutung vermittelt, fügen Sie barrierefreie Alternativen hinzu, wie ein aria-label oder sichtbaren Text in der Nähe.