CSS-Dreieck mit Rahmen-CSS erzeugen

Der CSS-Dreieck-Generator erstellt CSS-Text für ein rahmenbasiertes Dreieck. Richtung und Größe können Sie angeben; ohne diese Eingaben gelten up und 20 als Voreinstellungen.

Wofür der CSS-Dreieck-Generator geeignet ist

Mit dem CSS-Dreieck-Generator erstellen Sie CSS-Text für ein Dreieck, das über Rahmen statt über ein Bild aufgebaut wird. Sie legen dafür Richtung und Größe fest. Die Richtung kann nach oben, unten, links oder rechts zeigen; zusätzlich stehen die vier diagonalen Varianten oben links, oben rechts, unten links und unten rechts zur Verfügung. Die Eingaben Richtung und Größe sind optional. Wenn Sie nichts angeben, wird die Richtung nach oben verwendet und die Größe auf 20 gesetzt.

CSS-Dreieck Schritt für Schritt erzeugen

1. Öffnen Sie das Werkzeug und tragen Sie bei Bedarf eine Richtung ein. Verwenden Sie einen der unterstützten Werte: up, down, left, right, top-left, top-right, bottom-left oder bottom-right. Lassen Sie das Feld leer, wird up verwendet.

2. Geben Sie eine Größe ein, wenn das Dreieck nicht die voreingestellte Größe haben soll. Ohne Eingabe wird der Wert 20 verwendet. Die Größe wird rechnerisch verarbeitet, unter anderem durch eine Division durch zwei, und anschließend in Pixelwerte für die Rahmenbreiten eingesetzt.

3. Übernehmen Sie die Eingaben und lesen Sie den erzeugten CSS-Text aus dem Ergebnisbereich. Der CSS-Aufbau verwendet eine Breite und Höhe von null, einen durchgezogenen Rahmen und vier Rahmenbreiten in Pixeln. So entsteht die Dreiecksform durch die Geometrie der Rahmen.

4. Prüfen Sie die Richtung im erzeugten Selektor und die Rahmenbreiten. Wenn Sie eine diagonale Richtung benötigen, wählen Sie den entsprechenden unterstützten Wert ausdrücklich aus.

5. Behandeln Sie das Farbfeld nicht als zuverlässige Farbsteuerung: Die übergebene Farbe verändert den erzeugten CSS-Text nicht. Die ausgegebenen Rahmenfarben sind transparent. Wenn ein farbiges Dreieck benötigt wird, müssen Sie den ausgegebenen CSS-Text daher anschließend selbst anpassen.

6. Bei einem nicht erkannten Richtungswert wird kein Fehler beschrieben. Stattdessen verwendet die Rahmengeometrie das Muster für up, während der erzeugte Selektor den eingegebenen Richtungstext enthält. Verwenden Sie deshalb die aufgeführten Richtungswerte, statt eigene Schreibweisen zu testen.

Ergebnis richtig einordnen

Das Ergebnis ist CSS-Text für ein rahmenbasiertes Dreieck, nicht eine fertige Bilddatei. Achten Sie zuerst darauf, ob die vier Rahmenbreiten zur gewünschten Orientierung passen. Die Werte werden aus der eingegebenen Größe berechnet und in Pixeln ausgegeben.

Die Farbeingabe hat bei diesem Werkzeug keine Auswirkung auf den erzeugten CSS-Text: Die Rahmen bleiben transparent. Eine sichtbare Farbe lässt sich aus dem Ergebnis daher nicht als bestätigte Werkzeugeigenschaft ableiten.

Auch eine unbekannte Richtung sollten Sie nicht als gültige neue Variante interpretieren. In diesem Fall wird zwar der eingegebene Text im Selektor weitergeführt, die Rahmengeometrie fällt jedoch auf das Muster für up zurück. Bei ungewöhnlichen Größen ist ebenfalls Vorsicht angebracht, weil eine Größenberechnung erfolgt, ohne dass hier eine Bereichs- oder Positivitätsprüfung beschrieben ist.

Praktisches Beispiel

Sie benötigen für eine seitliche Markierung ein nach rechts gerichtetes CSS-Dreieck und erzeugen dafür CSS-Text mit der Richtung right und der Größe 24.

Sie wählen right als Richtung, tragen 24 als Größe ein und übernehmen die Eingaben. Anschließend prüfen Sie, ob der ausgegebene Selektor die Richtung right nennt und der CSS-Text die berechneten Rahmenwerte enthält.

Der Ergebnisbereich enthält CSS-Text mit null Breite und Höhe, einem durchgezogenen Rahmen sowie vier in Pixeln ausgedrückten Rahmenbreiten, die aus der Größe berechnet wurden.

Einschränkungen

• Die Farbeingabe wird im erzeugten CSS nicht berücksichtigt. Für Größen werden Berechnungen ausgeführt, ohne dass eine Bereichs- oder Positivitätsprüfung beschrieben ist.

Häufige Fehler

• Ursache: Sie erwarten, dass die Farbeingabe die Dreiecksfarbe festlegt. Korrektur: Prüfen Sie den ausgegebenen CSS-Text und passen Sie die transparenten Rahmenfarben anschließend selbst an, wenn eine sichtbare Farbe erforderlich ist.

Häufige Fragen

Welche Werte gelten ohne Eingabe?

Ja. Ohne Richtungsangabe verwendet das Werkzeug up; ohne Größenangabe wird 20 eingesetzt.

Steuert die Farbeingabe die Farbe des Dreiecks?

Die Farbeingabe verändert den erzeugten CSS-Text nicht. Die Rahmenfarben werden transparent ausgegeben.

Was passiert bei einer unbekannten Richtung?

Nein, ein nicht erkannter Wert wird nicht als eigene Richtung verarbeitet. Die Rahmengeometrie fällt auf das Muster für up zurück, während der eingegebene Text im Selektor enthalten bleibt.