CSS Clip-Path Generator

Einstellungen

Vorschau & CSS

 
   
 
 
   
 
 
 
So wird's verwendet
 
     
  1. Formtyp wählen — Polygon, Kreis, Ellipse oder Inset aus der Formauswahl wählen.
    2.  
  2. Preset nutzen oder Punkte ziehen — Eines der 12 Polygon-Presets (Dreieck, Pfeil, Stern…) als Ausgangspunkt nehmen oder Griffpunkte in der Vorschau ziehen.
    3.  
  3. Parameter anpassen — Für Kreis/Ellipse Radius und Position festlegen. Für Inset jede Seite unabhängig steuern.
    4.  
  4. CSS kopieren — Auf „CSS kopieren" klicken, um den fertigen clip-path-Wert zu erhalten.
    5.  
 
 
 
Was ist CSS clip-path?
 
CSS clip-path maskiert ein Element auf eine bestimmte Form und blendet alles außerhalb des definierten Bereichs aus. Der ursprüngliche Elementraum bleibt erhalten — nur der sichtbare Bereich ändert sich.
 
Unterstützt werden polygon(), circle(), ellipse(), inset() und path() (SVG-Pfade). Formen werden in Prozent- oder absoluten Koordinaten relativ zur Bounding Box definiert.
 
 
 
Häufige Anwendungsfälle
 
 
Diagonale Abschnittstrennungen
 
Hexagonale Bildraster
 
Benutzerdefinierte Hero-Formen
 
Sprechblasen-Elemente
 
Animierte Enthüllungseffekte
 
Ribbon-/Banner-Ecken
 
Kreisförmige Avatar-Ausschnitte
 
Pfeil-/Chevron-Trenner
 
 
Tipps & Best Practices
 
 
 clip-path animieren 
Zwischen zwei polygon()-Formen mit gleicher Punktanzahl lässt sich ein Übergang animieren. Für morphende Button-Hover-Effekte oder Enthüllungen beim Scrollen nutzen.
 
 
 Overflow wird abgeschnitten 
clip-path schneidet alle überlaufenden Inhalte ab, einschließlich box-shadow. Schatten stattdessen auf ein Wrapper-Element anwenden.
 
 
 Prozenteinheiten verwenden 
Polygon-Punkte in Prozent definieren, damit die Form mit responsiven Layouts korrekt skaliert, ohne Media Queries zu benötigen.
 
 
 Browser-Unterstützung 
Alle modernen Browser unterstützen clip-path mit Grundformen. Die path()-Funktion hat etwas weniger konsistente Unterstützung — für breite Kompatibilität Polygon bevorzugen.
 
 
 
Häufig gestellte Fragen
 
 
Beeinflusst clip-path das Element-Layout?
 
Nein. Das Element nimmt weiterhin seinen vollständigen ursprünglichen Platz im Dokumentfluss ein. Nur das visuell Gerenderte ändert sich. shape-outside verwenden, wenn Text die Form umfließen soll.
 
 
 
Kann ich clip-path animieren?
 
Ja, wenn Formtyp gleich bleibt und Polygon-Punkte gleich in der Anzahl sind. Übergang zwischen zwei polygon()-Formen für Morphing-Effekte: transition: clip-path 0.4s ease;.
 
 
 
Warum wird mein box-shadow nicht angezeigt?
 
clip-path schneidet alles außerhalb der Form ab, einschließlich Schatten. box-shadow auf ein übergeordnetes Wrapper-Element anwenden, das nicht geclippt wird.
 
 
 
Was ist der Unterschied zwischen clip-path und mask?
 
clip-path verwendet geometrische Formen für harte Kanten. mask verwendet Bilder oder Verläufe und ermöglicht weiche Kanten und partielle Transparenz. Für einfache Formen ist clip-path schneller und einfacher.