CSS-Clip-Path-Generator
Zeichnen Sie beliebige Polygonformen – einschließlich konkaver Kerben – indem Sie Punkte auf einer Live-Vorschau-Box oder Ihrem eigenen hochgeladenen Bild verschieben, und kopieren Sie den resultierenden CSS-Wert clip-path: polygon(...).
🔒 Wird vollständig in Ihrem Browser verarbeitet – nichts, was Sie hier eingeben, wird jemals hochgeladen.
Ergebnis
CSS clip-path akzeptiert eine polygon()-Funktion, die aus beliebig vielen x/y-Koordinatenpaaren besteht, was bedeutet, dass man einen Kasten in Formen schneiden kann, die weit über die einfachen Rechtecke und Kreise hinausgehen, zu denen die meisten greifen. Der Haken ist, dass das Eintippen dieser Koordinaten von Hand mühsam und für alles jenseits eines einfachen Dreiecks fast unmöglich korrekt hinzubekommen ist – dieser Generator verwandelt diese Koordinatenliste in eine Reihe verschiebbarer Punkte auf einer Live-Vorschau, sodass die Form, die Sie sehen, immer die Form ist, die das CSS erzeugt.
Jeder Punkt in der Vorschau wird als Prozentsatz der Breite und Höhe des Kastens gespeichert, was exakt der Funktionsweise von clip-path: polygon() unter der Haube entspricht: Eine so erstellte Form behält ihre Proportionen unabhängig davon bei, welche Größe das Element auf einer echten Seite annimmt, von einer kleinen Icon-Maske bis zu einem bildschirmfüllenden Hero-Banner. Ziehen Sie einen beliebigen Punkt, um den Umriss umzuformen, klicken Sie nahe an eine Kante, um genau dort einen neuen Punkt hinzuzufügen, oder doppelklicken Sie auf einen vorhandenen Punkt, um ihn zu löschen – der Editor behält stets mindestens drei Punkte, da ein Polygon mit weniger nicht existieren kann.
Die sechs mitgelieferten Vorgaben sollen beweisen, dass clip-path mehr als konvexe Formen beherrscht: Der Stern und der Pfeil nutzen beide einspringende Winkel, die nach innen zeigen, die Sprechblase schneidet eine dreieckige Spitze aus einem ansonsten einfachen Rechteck aus, und der Ticket-Abschnitt drückt zwei Kerben in gegenüberliegende Kanten, wie es bei einem echten perforierten Ticket aussieht. Laden Sie eine beliebige Vorgabe und ziehen Sie von dort aus weiter – nichts im Editor sperrt Sie auf die Ausgangsform ein.
Laden Sie Ihr eigenes Bild hoch, um den Clip-Pfad an echtem Inhalt anstelle eines einfachen Kastens zu prüfen, oder überspringen Sie den Upload ganz, und die Vorschau fällt auf ein gestreiftes Muster zurück, damit die ausgeschnittene Form so oder so deutlich sichtbar bleibt. Wie jedes Werkzeug auf dieser Seite läuft das Ganze lokal im Browser: Kein Bild verlässt jemals Ihr Gerät, und der Generator arbeitet offline weiter, sobald die Seite geladen ist.