clip-path mit polygon() und circle()
Beschneiden Sie Elemente mit der Eigenschaft clip-path auf benutzerdefinierte Polygon- oder Kreisformen.
clip-path mit polygon() und circle() ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist clip-path?
clip-path beschneidet den sichtbaren Bereich eines Elements auf eine angegebene Form. Alles außerhalb der Form ist unsichtbar, nimmt aber weiterhin Platz im Layout ein.
clip-path: circle()
Beschneiden Sie ein Element auf eine kreisförmige Form. Das Argument ist der Radius:
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
Beschneiden Sie ein Element auf eine Ellipse, indem Sie den x-Radius, den y-Radius und optional die Position des Mittelpunkts angeben:
<div class="card-image"></div>
clip-path: polygon()
Die leistungsfähigste clip-path-Funktion. Definieren Sie ein Polygon, indem Sie x,y-Koordinatenpaare auflisten:
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
Beschneiden Sie ein Element auf ein Rechteck mit optional abgerundeten Ecken. Die Argumente sind Abstände vom Rand:
<div class="card"></div>
clip-path für Abschnittsformen
Erstellen Sie abgewinkelte Übergänge zwischen Seitenabschnitten:
<div class="section-diagonal">Diagonal Section</div>
clip-path animieren
clip-path mit derselben Anzahl an Punkten kann für Einblend- und Morphing-Animationen animiert werden:
<div class="reveal visible"></div>
clip-path im Vergleich zu border-radius
Für einfache abgerundete Formen ist border-radius besser geeignet – es funktioniert mit Hintergrund und Rahmen. Verwenden Sie clip-path, wenn Sie nicht rechteckige Formen benötigen, die mit border-radius nicht möglich sind.
clip-path: path()
path() akzeptiert einen SVG-Pfadstring für beliebige Formen:
<div class="star"></div>
Überlegungen zur Performance
clip-path erzeugt einen neuen Stacking Context und kann bei jeder animierten Bildphase einen Paint-Vorgang auslösen. Das Animieren von clip-path ist teurer als das Animieren von transform oder opacity – kombinieren Sie diese Eigenschaften mit Bedacht.
Referenzbox von clip-path
Das Koordinatensystem für clip-path ist die Border-Box des Elements (oder die Margin-Box bei SVG). Prozentwerte beziehen sich auf die Abmessungen des Elements.
Kurzer Test
Welche clip-path-Funktion erzeugt eine unregelmäßige, nicht rechteckige Form, die durch Koordinatenpaare definiert ist?
Zusammenfassung
clip-path beschneidet Elemente auf geometrische Formen. circle() und ellipse() erzeugen runde Beschneidungen. polygon() definiert beliebige Formen mit mehreren Eckpunkten. inset() beschneidet ein Element auf ein Rechteck mit optionaler Abrundung. Animieren Sie zwischen Polygonformen mit derselben Anzahl an Punkten, um eindrucksvolle Einblendungen zu erzeugen. Verwenden Sie path() für beliebige SVG-basierte Formen.
Häufig gestellte Fragen
Ist die Lektion „clip-path mit polygon() und circle()“ kostenlos?
Ja — der vollständige Text von „clip-path mit polygon() und circle()“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „clip-path mit polygon() und circle()“?
Beschneiden Sie Elemente mit der Eigenschaft clip-path auf benutzerdefinierte Polygon- oder Kreisformen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „clip-path mit polygon() und circle()“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- clip-path mit polygon() und circle()
- shape-outside für Textumfluss
- clip-path-Formen animieren
- CSS-Masken vs. Clip-path