CSS Clip-Path-Generator

Dieses Tool baut einen clip-path-Wert genauso auf, wie du eine Form auf Papier skizzieren würdest: durch Setzen von Punkten und Anpassen, bis der Umriss stimmt. Wähle eine Vorlage aus dem Formenraster, etwa ein Sechseck, einen Stern oder eine Sprechblase, und die Vorschau schneidet die Beispielbox sofort mit der CSS-Eigenschaft clip-path entlang dieses Umrisses zu. Im Hintergrund wird jede Vorlage als Liste von Koordinatenpaaren in Prozent gespeichert, sodass die Form unabhängig von der Größe des Endelements korrekt skaliert.

Bei jeder Polygonform kannst du jeden Punkt direkt in der Vorschau ziehen. Jeder Zug berechnet die Position des Punktes als Prozentsatz von Breite und Höhe der Box neu und baut die Funktion polygon() mit den neuen Koordinaten wieder auf. Da clip-path nur Teile eines Elements verbirgt, statt es zu skalieren, bleibt der Hintergrund an Ort und Stelle, während sich der sichtbare Bereich in der Form ändert. Deshalb lässt sich die Vorschau zwischen hellem, dunklem und Verlaufshintergrund umschalten, um Kanten und Kontrast vor echtem Inhalt zu prüfen.

Das erzeugte CSS ist eine einzige Deklaration, die du auf jedes Element mit festgelegter Breite und Höhe einfügen kannst. Moderne Browser rendern clip-path nativ, sodass auf deiner Seite kein JavaScript nötig ist, nur die kopierte Regel. Alles läuft in deinem Browser mit einfachen Berechnungen ab; nichts, was du hier gestaltest, wird hochgeladen oder gespeichert.