CSS-Clip-Pfad-Generator

CSS Clip-Path akzeptiert eine Polygon()-Funktion, die aus einer beliebigen Anzahl von x/y-Koordinatenpaaren besteht, was bedeutet, dass es einen Kasten in Formen schneiden kann, die weit über die einfachen Rechtecke und Kreise hinausgehen, nach denen die meisten Menschen greifen. Der Haken daran ist, dass das manuelle Eingeben dieser Koordinaten mühsam ist und es fast unmöglich ist, alles richtig zu machen, was über ein einfaches Dreieck hinausgeht. Dieser Generator wandelt diese Koordinatenliste in einer Live-Vorschau in eine Reihe verschiebbarer Punkte um, 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 Felds gespeichert, und genau so funktioniert auch „clip-path:polygon()“ unter der Haube: Eine auf diese Weise erstellte Form behält ihre Proportionen korrekt, unabhängig von der Größe des Elements auf einer echten Seite, von einer kleinen Symbolmaske bis hin zu einem Hero-Banner in voller Breite. Ziehen Sie einen beliebigen Punkt, um den Umriss neu zu formen, klicken Sie in die Nähe einer Kante, um genau an der angeklickten Stelle einen neuen Punkt hinzuzufügen, oder doppelklicken Sie auf einen vorhandenen Punkt, um ihn zu löschen – der Editor behält immer mindestens drei Punkte bei, da ein Polygon nicht aus weniger bestehen kann.

Die Auswahl der sechs gebündelten Voreinstellungen soll beweisen, dass Clip-Path mehr kann als nur konvexe Formen: Der Stern und der Pfeil beruhen beide auf Reflexwinkeln, die nach innen zeigen, die Sprechblase schnitzt einen dreieckigen Schwanz aus einem ansonsten schlichten Rechteck und der Ticket-Stub drückt zwei Kerben in gegenüberliegende Kanten ein, so wie ein echtes perforiertes Ticket aussieht. Laden Sie eine beliebige Voreinstellung und ziehen Sie von dort weiter – nichts am Editor bindet Sie an die Ausgangsform.

Laden Sie Ihr eigenes Bild hoch, um eine Vorschau des Clippfads anhand des tatsächlichen Inhalts anstelle eines einfachen Felds anzuzeigen, oder überspringen Sie den Upload vollständig und die Vorschau wird auf ein Streifenmuster zurückgesetzt, sodass die Schnittform in beiden Fällen deutlich sichtbar bleibt. Wie jedes Tool auf dieser Website 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.