CSS clip-path
Generator
Ein intuitiver Generator zum Erstellen von CSS clip-path per Drag & Drop.
Editor
Klicken, um Punkt hinzuzufügen. Ziehen zum Verschieben. Rechtsklick zum Löschen.
Vorschau
Hover-Animation
Wenn aktiviert, wird Hover-Code generiert. Die Anzahl der Punkte muss übereinstimmen.
Bearbeiten der Basisform. Wechseln Sie, um die Hover-Form einzustellen.
Code
Das könnte dir auch gefallen
Über den Generator
Erstellen Sie CSS clip-path intuitiv per Drag & Drop.
Keine manuellen Berechnungen mehr nötig.
Unterstützt verschiedene Formen und Animationen.
Anleitung
1️⃣ Form wählen
Wählen Sie eine Vorlage.
2️⃣ Anpassen
Ziehen Sie die Punkte.
3️⃣ Kopieren
Code kopieren und einfügen.
Eigenschaften-Guide
Erklärung der Funktionen:
■ polygon() — Polygon
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Beliebige Anzahl von Punkten. Mindestens 3.
■ circle() — Kreis
clip-path: circle(radius at zentrumX zentrumY)
Radius und Mittelpunkt.
■ ellipse() — Ellipse
clip-path: ellipse(rx ry at zentrumX zentrumY)
Zeichnet eine Ellipse.
■ inset() — Rechteckiger Ausschnitt
clip-path: inset(oben rechts unten links round radius)
Zuschneiden nach innen. Abgerundete Ecken werden unterstützt.
FAQ
- Q.Beeinflusst clip-path SEO?
- Nein. Es ändert nur die visuelle Darstellung.
- Q.Unterschied zwischen CSS und SVG?
- CSS ist einfacher, SVG ist für hochkomplexe Pfade.
- Q.Kann ich clip-path beim Hover animieren?
- Ja, wenn die Anzahl der Punkte identisch ist.
- Q.Sind abgeschnittene Bereiche klickbar?
- Nein, Klicks außerhalb des Bereichs werden ignoriert.
- Q.Gibt es Sicherheitsrisiken?
- Keine. Alles läuft lokal im Browser.
Beispiele
Diagonale Schnitte
Erstellen Sie dynamische Header.
Profilbilder
Schneiden Sie Avatare in Sechsecke oder Sterne.
Hover-Animationen
Vergrößern Sie das Bild beim Hover.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.