CSS Dreieck-Generator

Zwei Techniken dominieren die Erstellung von CSS-Dreiecken, und beide lösen unterschiedliche Probleme. Der Rand-Trick setzt Breite und Höhe eines Elements auf null und nutzt dicke, ungleiche Ränder, die in scharfen Winkeln aufeinandertreffen, um eine Dreiecksform vorzutäuschen. Er funktioniert seit Internet Explorer 6 und braucht keine besondere Browserunterstützung, erzeugt aber nur eine flache Form in einer Farbe. Clip-path geht den umgekehrten Weg: Es schneidet ein dreieckiges Fenster aus einer normalen Box, sodass die Form einen Verlauf oder ein Hintergrundbild tragen oder sanft in ein anderes Polygon übergehen kann. Dieser Generator erstellt beide Varianten mit denselben Reglern, sodass du sie direkt vergleichen kannst.

Wähle eine von acht Richtungen: die vier Himmelsrichtungen für symmetrische Dreiecke oder die vier Ecken für rechtwinklige Formen, die sich für Bandecken und gefaltete Kanteneffekte eignen. Bewege die Regler für Breite und Höhe, um die Form des Dreiecks zu ändern, und wähle eine Farbe über den Farbwähler oder durch Eingabe eines Hex-Werts. Die Vorschau aktualisiert sich bei jeder Änderung und zeigt genau das CSS, das dir das Tool liefert, keine Annäherung.

Wechsle den Hintergrund hinter der Vorschau, um zu prüfen, wie die Form auf hellen, grauen oder dunklen Flächen wirkt, bevor du dich für eine Farbe entscheidest. Sobald es passt, kopiere den CSS-Block unter der Vorschau: eine Rand-Trick-Regel, wenn du diese Methode gewählt hast, oder eine Deklaration mit Breite, Höhe, Hintergrundfarbe und clip-path, wenn du die andere Methode gewählt hast. Nichts, was du hier baust, wird hochgeladen oder gespeichert; der Code bleibt in deinem Browser, bis du ihn kopierst.