Kategorie: Entwicklung
CSS-Dreieck-Generator
Erstellen Sie ein reines CSS-Dreieck mit dem Border-Trick
Wählen Sie Richtung, Größe und Farbe, um eine Box der Größe null mit farbigen Rändern zu erstellen, die als Dreieck dargestellt wird, mit einer Live-Vorschau und der fertigen CSS-Deklaration zum Kopieren. Alles wird in Ihrem Browser berechnet.
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Ein CSS-Dreieck ist eine Box mit `width: 0; height: 0;`, deren Ränder auf einer Seite eine Farbe erhalten und auf den beiden benachbarten Seiten transparent gemacht werden, sodass nur der Keil des farbigen Randes sichtbar bleibt. Von Hand ist das leicht falsch herum zu machen – das falsche Seitenpaar oder ein Rand, der versehentlich deckend statt transparent bleibt –, deshalb baut dieses Tool die vier Deklarationen aus Richtung, Größe und Farbe zusammen und zeigt das Ergebnis live auf einer echten Box.
So funktioniert es
- Wählen Sie eine Richtung: oben, unten, links oder rechts.
- Legen Sie Größe und Farbe fest.
- Kopieren Sie die Border-Deklarationen in Ihr Stylesheet.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Wird irgendetwas an einen Server gesendet?
- Nein. Die Vorschau ist ein echter CSS-Rand, der von Ihrem Browser gerendert wird, und die Deklaration ist Text, der auf der Seite zusammengesetzt wird.
- Warum müssen Breite und Höhe auf 0 gesetzt werden?
- Der Border-Trick beruht darauf, dass die Ränder in einem Punkt zusammenlaufen, statt eine Box zu umrahmen. Eine Breite oder Höhe ungleich null würde den Keil zu einem Trapez abflachen.
- Kann ich das für einen Pfeil an einem Tooltip oder einer Sprechblase verwenden?
- Ja – das ist die häufigste Verwendung. Positionieren Sie das Dreieck absolut am Rand des Tooltips und stimmen Sie seine Farbe auf den Hintergrund des Tooltips ab.