CSS-clip-path-Generator
Wähle eine Form und ziehe die Punkte in der Vorschau, um anzupassen. Der clip-path-Code in Prozent funktioniert bei jeder Größe des Elements.
So geht’sZuschnitt in Formen mit clip-path
Verfügbar auf: 
CSS-clip-path-Generator: wofür es gut ist
Wähle eine der fertigen Formen (Dreieck, Raute, Sechseck, Fünfeck, Stern, Pfeil, Sprechblase, abgeschnittene Ecken, Parallelogramm, Kreis oder Ellipse) und ziehe die Punkte in der Vorschau, um anzupassen. Die Koordinaten sind in Prozent, sodass der Zuschnitt bei jeder Größe funktioniert.
Teste mit deinem Foto und kopiere die fertige clip-path-Zeile.
So geht’s
- Wähle eine Form.
- Ziehe die Punkte zum Anpassen und teste mit einem Foto.
- Kopiere den clip-path und nutze ihn im CSS.
Wann nutzen
- Fotos in unterschiedlichen Formen auf Websites.
- Abschnitte mit schrägen Ecken.
- Siegel, Pfeile und Sprechblasen nur mit CSS.
Häufige Fragen
Was ist clip-path?
Es ist eine CSS-Eigenschaft, die nur den Teil eines Elements innerhalb einer Form zeigt. Das Bild bleibt in der Datei vollständig; nur was außerhalb der Form liegt, wird versteckt.
Funktioniert es in allen Browsern?
Ja. polygon(), circle() und ellipse() funktionieren in allen aktuellen Browsern, ohne Präfix.
Kann ich es animieren?
Ja, zwischen zwei polygon() mit gleicher Punktzahl, mit transition oder animation auf clip-path. Die Punkte bewegen sich sanft von einer Form zur anderen.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.