Toolipedia
DE
← Alle Text-Tools

CSS-Clip-Path-Generator

Punkte ziehen, um Polygone, Kreise und Formen zu erstellen, dann das Clip-Path-CSS kopieren.

  • Kostenlos
  • Ohne Anmeldung
  • Funktioniert auf jedem Gerät

Über CSS-Clip-Path-Generator

Schneiden Sie Elemente in Dreiecke, Sechsecke, Pfeile, Kreise oder beliebige eigene Polygone, indem Sie in einer Vorschau Punkte ziehen, und kopieren Sie dann den clip-path-Wert. Prozentbasierte Koordinaten halten die Form responsiv. Bedenken Sie, dass beschnittene Bereiche weiterhin existieren, sodass auch Schatten und Rahmen abgeschnitten werden.

So verwenden Sie CSS-Clip-Path-Generator

  1. Wähle eine Form wie Polygon oder Kreis.
  2. Ziehe die Punkte in der Vorschau, um die Form zu ändern.
  3. Kopiere das clip-path-CSS und wende es auf dein Element an.

Warum dieses Tool?

Auch bekannt als

Häufig gestellte Fragen

Warum wird mein box-shadow mit clip-path abgeschnitten?

Clip-path schneidet alles außerhalb der Form ab, auch Schatten. Setzen Sie den Schatten auf ein übergeordnetes Wrapper-Element und verwenden Sie filter: drop-shadow, damit er der beschnittenen Kontur folgt.

Kann ich zwischen zwei clip-path-Formen animieren?

Ja, wenn beide Formen dieselbe Funktion mit derselben Punktanzahl nutzen. Der Browser bewegt dann jeden Punkt bei einem Übergang sanft.

Ändert clip-path den vom Element belegten Platz?

Nein. Das Element behält im Layout seine ursprüngliche Box, und nur der sichtbare Bereich wird abgeschnitten. Klicks außerhalb der sichtbaren Form werden ebenfalls ignoriert.

Ist CSS-Clip-Path-Generator kostenlos?

Ja. CSS-Clip-Path-Generator auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.

Ist die Nutzung sicher?

Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.

Funktioniert es auf meinem Smartphone?

Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.

Brauche ich ein Konto?

Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.

Kann ich CSS-Clip-Path-Generator auf meiner eigenen Website einsetzen?

Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.

Ähnliche Tools