Kategorie: Entwicklung
CSS-Clip-Path-Generator
Eine Form wählen und ihren clip-path-Wert kopieren
Wählen Sie eine Form – von Kreis oder Ellipse bis zu Sechseck, Pfeil oder Sprechblase –, passen Sie an, wie weit sie von den Kanten einrückt, und kopieren Sie den resultierenden clip-path-Wert mit Live-Vorschau.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Ein clip-path-Polygon von Hand zu schreiben bedeutet, die prozentuale Position jedes Punkts zu berechnen und sich vorzustellen, wie sie sich verbinden – für alles über ein einfaches Dreieck hinaus ist das langsam zu iterieren. Dieses Werkzeug bringt eine Reihe gängiger Formen als fertige Punktlisten mit, dazu einen einzigen Einzug-Regler, der jeden Punkt bei jeder Form auf dieselbe Weise zur Mitte hin skaliert, sodass Sie einen brauchbaren clip-path in der Vorschau sehen und kopieren können, ohne die Geometrie selbst zu berechnen.
So funktioniert es
- Wählen Sie eine Form.
- Passen Sie den Einzug an, um sie innerhalb ihrer Box zu vergrößern oder zu verkleinern.
- Kopieren Sie die clip-path-Deklaration.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Warum verhalten sich Kreis und Ellipse anders als die übrigen Formen?
- circle() und ellipse() nehmen einen Radius, sodass der Einzug dort den Radius direkt verkleinert, während die Polygon-Formen jeden Punkt um denselben Prozentsatz zur Mitte hin skalieren.
- Beeinflusst clip-path das Layout oder nur, was sichtbar ist?
- Nur das Sichtbare. Das Element behält für Layout-Zwecke seine ursprüngliche Box; clip-path verbirgt lediglich die Teile außerhalb der Form, genau wie overflow: hidden Inhalte außerhalb einer Box verbirgt.
- Wird etwas an einen Server gesendet?
- Nein. Die Punkte der Form werden auf der Seite aus Ihrer Wahl von Form und Einzug berechnet, weshalb sich die Vorschau sofort aktualisiert.