Aufgabenpfad / von der Eingabe zum Ergebnis
So erstellst du ein CSS-Dreieck
- 01
Wähle die Richtung
Oben rechts / Unten rechts / Unten links / Oben links · 8
- 02
Lege die Größe fest
Stelle Basisbreite und Dreieckshöhe jeweils von 8 bis 180 px in 1-px-Schritten ein. Bei Oben/Unten bildet die Breite die Basis und die Höhe den Abstand zur Spitze. Bei Links/Rechts bildet die Höhe die senkrechte Basis und die Breite den waagerechten Abstand zur Spitze. Standardmäßig misst die Form waagerecht 72 px und senkrecht 64 px.
- 03
Wähle die Füllfarbe
Setze Füllfarbe auf einen beliebigen sechsstelligen Hex-Wert — der Standard ist #0f4cff. Die Live-Vorschau und die generierte border-color-Deklaration bleiben immer synchron, was du siehst, ist also exakt das, was kopiert wird.
- 04
Prüfe den Vorschaustatus
Die Live-Vorschau rendert bei jeder Änderung neu, und das Statusbadge zeigt GÜLTIGES CSS, wenn alle Werte im Bereich liegen. Ein Wert außerhalb des Bereichs schaltet es auf WERTE PRÜFEN und blockiert Kopieren und Herunterladen, bis das markierte Steuerelement korrigiert ist.
- 05
Probiere die Beispielvorgabe
Beispiel laden setzt ein nach rechts zeigendes Dreieck mit 104 px waagerechter Ausdehnung, 86 px senkrechter Basis und der Füllfarbe #ffd11a. Zurücksetzen stellt die Standardwerte wieder her.
- 06
Kopiere oder lade das CSS herunter
Drücke CSS kopieren, um die .triangle-Regel in die Zwischenablage zu kopieren, oder .css herunterladen, um sie als toolars-triangle.css zu speichern. Die Regel setzt Breite und Höhe auf null und deklariert alle vier Rahmen, bereit zum Einfügen in jedes Stylesheet. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.