CSS-Dreieck-Generator
Erstellen Sie CSS-Code für Dreiecke über Border-Eigenschaften mit konfigurierbarer Ausrichtung und Größe.
Tool ausführen
Dieser CSS-Dreieck-Generator erstellt CSS-Regeln für geometrische Dreiecke, die rein auf Rahmenstrukturen basieren. Die Methode setzt Breite und Höhe eines Elements im Stylesheet auf null und erzeugt die sichtbare Dreiecksform über unterschiedlich bemessene Rahmenränder.
Sie können die Ausrichtung gezielt festlegen. Unterstützt werden die Richtungen up, down, left und right sowie diagonale Varianten wie top-left, top-right, bottom-left und bottom-right. Über das Eingabefeld für die Größe definieren Sie den numerischen Wert in Pixeln. Das Werkzeug führt die nötigen Berechnungen automatisch durch, halbiert Maße für gleichmäßige Kanten und legt einen durchgezogenen Rahmenstil fest.
Geben Sie eine nicht unterstützte Richtung ein, nutzt das Tool automatisch die Rahmenberechnung für nach oben zeigende Dreiecke. Der erzeugte CSS-Code enthält standardmäßig transparente Rahmenfarben. Sie können das resultierende Snippet direkt kopieren und in Ihr Webprojekt einbinden, um Tooltips, Pfeile oder Menüzeiger ohne zusätzliche Bilddateien darzustellen.
Anleitung
- Wählen Sie die gewünschte Ausrichtung des Dreiecks, etwa nach oben, unten oder diagonal.
- Tragen Sie den gewünschten Basiswert für die Größe in Pixeln ein.
- Starten Sie die Berechnung, um das fertige CSS-Snippet im Ausgabebereich anzuzeigen.
- Kopieren Sie den CSS-Code in Ihre Datei und tragen Sie die gewünschte Akzentfarbe an der sichtbaren Rahmenkante ein.
Beispiele
- Dreieck nach oben: Bei Ausrichtung up und Größe 20 erzeugt das Tool CSS-Regeln mit 0px oberer Rahmenbreite, jeweils 10px linker und rechter Breite sowie 20px unterer Rahmenbreite.
- Seitlicher Pfeil nach rechts: Bei Ausrichtung right und Größe 30 werden 15px für oberen und unteren Rand, 0px für die rechte Kante und 30px für die linke Kante ausgegeben.
FAQ
Wie erzeugt reines CSS die Form eines Dreiecks?
Wenn Breite und Höhe eines Elements null betragen, treffen die Ränder diagonal aufeinander. Indem einzelne Ränder transparent und andere farbig gestaltet werden, entsteht ein Dreieck.
Warum sind die Rahmenfarben im erzeugten Code transparent?
Die CSS-Ausgabe setzt Rahmenfarben standardmäßig auf transparent. Sie können die gewünschte Farbe im Stylesheet an der Kante ergänzen, die das Dreieck formen soll.
Welche Richtungsangaben werden unterstützt?
Das Werkzeug berechnet Muster für up, down, left, right sowie die diagonalen Richtungen top-left, top-right, bottom-left und bottom-right.
Was passiert bei einer abweichenden Richtungsangabe?
Wird ein nicht gelisteter Text eingegeben, übernimmt das Tool das Rahmenmuster für nach oben zeigende Dreiecke, während der Selektorname den eingegebenen Text behält.