CSS Clip-Pfad-Generator

So funktioniert es

1. Formtyp wählen: Wählen Sie zwischen Polygon, Kreis, Ellipse oder Inset (Rechteck mit optional abgerundeten Ecken).
2. Steuerpunkte ziehen: Bewegen Sie die Form-Griffe in der Vorschau, um den Clip-Bereich präzise anzupassen.
3. CSS kopieren: Der erzeugte Wert der clip-path-Eigenschaft ist bereit, in Ihr Stylesheet eingefügt zu werden.

Warum den CSS-Clip-Path-Generator nutzen?

CSS clip-path erzeugt nicht-rechteckige Elementformen, indem alles außerhalb eines definierten Clip-Bereichs maskiert wird. Es wird für diagonale Sektionstrennungen, hexagonale Bildausschnitte, individuelle Button-Formen, kreative Hover-Effekte und maskierte Bild-Enthüllungen verwendet. Polygon-Koordinaten von Hand zu schreiben, bedeutet, Prozentwerte für jeden Eckpunkt zu berechnen, mühsam und schwer vorstellbar. Dieser interaktive Generator lässt Sie Punkte visuell ziehen und liefert die exakten CSS-Werte sofort.

Funktionen

• Polygon-Editor: Fügen Sie Eckpunkte hinzu, verschieben Sie sie oder entfernen Sie sie, um beliebige Polygonformen zu erstellen.
• Eingebaute Voreinstellungen: Diagonale, Chevron, Hexagon, Stern, Dreieck und weitere gängige Formen.
• Kreis- und Ellipsen-Modi: Visuelle Steuerung für kreis- und ellipsenförmige Clips.
• Inset-Modus: Erzeugen Sie rechteckige Clips mit individuellem border-radius an jeder Ecke.
• Außenbereichs-Vorschau: Sehen Sie den maskierten Bereich hervorgehoben, sodass Sie genau wissen, was ausgeblendet wird.

Häufige Fragen

Beeinflusst clip-path die anklickbaren Bereiche?

Ja. Standardmäßig werden Pointer-Events nur innerhalb des Clip-Bereichs registriert, der weggeschnittene Bereich ist sowohl unsichtbar als auch nicht anklickbar. Um das gesamte Element anklickbar zu lassen, während es nur visuell beschnitten wird, verwenden Sie pointer-events: all auf dem Element oder eine transparente Overlay-Schicht.

Kann ich clip-path animieren?

Ja, clip-path kann mit CSS übergangen und animiert werden. Animieren Sie zwischen zwei Polygonformen mit derselben Anzahl von Punkten, um einen flüssigen Morphing-Effekt zu erhalten. Formen mit unterschiedlicher Punktanzahl springen statt zu interpolieren.

Wird clip-path in allen Browsern unterstützt?

clip-path wird in allen modernen Browsern unterstützt. Für SVG-basierte Formen über die url(#id)-Syntax ist die Browser-Unterstützung breiter. Die Werte polygon, circle, ellipse und inset funktionieren universell in Chrome, Firefox, Safari und Edge.

Was CSS clip-path wirklich tut

Die CSS-Eigenschaft clip-path maskiert ein Element zu einer gewählten Form: alles innerhalb der Form ist sichtbar, alles außerhalb wird transparent. Das Layout-Feld des Elements ändert sich nicht (es belegt immer noch das gleiche Rechteck für Zwecke des Margin-Collapse, des Flusses und der Geschwisterpositionierung), aber nur die Pixel innerhalb der Beschneidungsregion werden gezeichnet. Das macht clip-path anders als Zuschneiden (was das Bild dauerhaft ändert) und anders als Positionierung (was Dinge verschiebt): clip-path ist eine zur Anzeigezeit angewandte Maske, kurz bevor die Pixel auf den Bildschirm gelangen.

Es gibt vier grundlegende Formfunktionen: polygon() (eine Liste von Eckpunkten als Prozent- oder Pixelkoordinaten), circle() (Radius plus ein Zentrum), ellipse() (zwei Radien plus ein Zentrum) und inset() (ein Rechteck, das von jeder Kante aus gemessen wird, optional mit abgerundeten Ecken). Für Formen, die für diese vier zu komplex sind (unregelmäßige Kurven, Sterne mit konkaven Einkerbungen, kalligrafische Konturen), akzeptiert clip-path auch einen SVG-Pfad über path() oder einen Verweis auf ein SVG <clipPath>-Element über url(#id). Der Browser zeichnet das Element, dann komponiert er es durch die Alpha-Maske, die durch Ihre Form definiert wird.

clip-path ist für modernes Webdesign wichtig, weil es Formen ermöglicht, die vor einem Jahrzehnt Bildbearbeitungsprogramme erfordert hätten. Ein diagonaler Abschnittstrenner, ein hexagonaler Bildausschnitt, ein Chevron-Banner, ein sternenförmiges Foto: alles jetzt in reinem CSS möglich, skalierbar auf jede Größe, beim Hover animierbar und barrierefrei, weil das zugrunde liegende Element immer noch HTML ist, kein rasterisiertes Bild. Der Kompromiss ist die Ausführlichkeit: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) für einen einfachen Diamanten handschriftlich zu schreiben ist machbar, aber ein 12-Eckpunkte-Stern oder ein benutzerdefinierter Logo-Ausschnitt ist ohne einen visuellen Editor unpraktisch. Dort passt dieser Generator hinein.

Wie dieses Tool hinter den Kulissen funktioniert

Die Vorschau ist ein div, mit Ihrem gewählten clip-path als Inline-CSS angewendet, aktualisiert bei jedem Ziehen eines Steuerungsgriffs. Die Griffe sind absolut positionierte Kreise, die über der Vorschau bei den Prozentkoordinaten jedes Eckpunkts überlagert werden. Wenn Sie einen Griff ziehen, erfasst JavaScript das mousemove- (oder touchmove-) Ereignis, konvertiert die Pixelposition in einen Prozentsatz des Vorschaubereichs, aktualisiert diesen Eckpunkt im In-Memory-Polygon und wendet die clip-path-Zeichenkette neu an. Echtzeit-Rendering bedeutet, dass Sie die Form während des Ziehens sich ändern sehen, nicht danach.

Das generierte CSS wird durch Verbinden der Eckpunkte zu einer Polygon-Zeichenkette konstruiert: polygon(x1% y1%, x2% y2%, ...) für den Polygon-Modus oder circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) für die einfacheren Formtypen. Prozentwerte anstatt Pixelwerte werden verwendet, weil Prozentsätze automatisch mit dem Element skalieren: ein Polygon, das bei 300x200 korrekt aussieht, sieht auch bei 600x400 ohne Änderung am CSS korrekt aus. Das Code-Feld wird bei jeder Interaktion aktualisiert, und die Schaltfläche CSS kopieren schreibt den aktuellen Wert in Ihre Zwischenablage.

Nichts verlässt Ihren Browser. Die Vorschau, die Formberechnungen, die CSS-Generierung und das Kopieren in die Zwischenablage sind alle clientseitiges JavaScript. Keine Netzwerkanfrage wird gemacht; kein Bild wird hochgeladen; keine Analyse Ihrer Formentscheidungen. Das Tool hat überhaupt kein Backend, das über das statische HTML und JavaScript hinausgeht, die einmal beim ersten Laden ausgeliefert werden. Öffnen Sie den Netzwerk-Tab des Browsers während der Nutzung und Sie werden null Anfragen nach dem ersten Seitenladen sehen. Das CSS, das Sie generieren, gehört Ihnen, um es in jedes Stylesheet einzufügen.

Kurze Geschichte des CSS-Clippings

• SVG clipPath, 2001.Die SVG 1.0-Spezifikation (W3C-Empfehlung, September 2001) führt <clipPath> ein, das erlaubt, dass jedes SVG-Element von einer anderen Form maskiert wird. SVG-Clipping handhabt komplexe Pfade, erfordert aber Inline-SVG-Markup, was die Wiederverwendung in einfachen HTML-Seiten ohne SVG-Geläufigkeit einschränkt.
• CSS clip-Eigenschaft, 1998 bis 2010er.Die ursprüngliche CSS clip-Eigenschaft (CSS 2-Spezifikation, 1998) unterstützte nur rect(), einen Vier-Werte-Rechteck-Clip auf absolut positionierten Elementen. Begrenzt und bis 2014 veraltet, aber immer noch in veralteten «nur Screenreader»-CSS-Mustern zu sehen, wo der sichtbare Inhalt zu 1x1 Pixel für Barrierefreiheit zugeschnitten wird.
• CSS Masking Module Level 1, 2014.Das W3C veröffentlicht die CSS Masking Module Level 1-Spezifikation (April 2014), die die moderne clip-path-Eigenschaft mit Polygon-, Kreis-, Ellipse-, Inset- und SVG-Pfad-Unterstützung einführt. Chrome 24 (Januar 2013) und Safari 7 (Juni 2013) liefern die Grundformen vor der formalen Spezifikation aus; Firefox folgt in Version 54 (Juni 2017).
• Adobe brutalistische Webdesign-Welle, 2015 bis 2017.Hero-Bereiche mit diagonalen Schnitten, schräge Banner-Trenner und hexagonale Team-Foto-Raster werden zu einem Designtrend, getrieben von Tools wie Webflow und Designartikeln auf CSS-Tricks. Awwwards-Stil-Portfolios zeigen clip-path-Tricks prominent, und die Eigenschaft geht von «obskurer CSS-Kuriosität» zu «erwarteter moderner Technik».
• Internet Explorer stirbt, 2022.Microsoft zieht Internet Explorer am 15. Juni 2022 zurück und beendet damit die letzte bedeutende Browser-Barriere für moderne CSS-Funktionen einschließlich clip-path. Bis 2023 ist «unterstützt clip-path?» keine ernsthafte browserübergreifende Sorge mehr, und die Eigenschaft wird zum Standardwerkzeug im reinen CSS-Design.
• CSS shape()-Funktion, 2024 und darüber hinaus.Das CSS Shapes Module entwickelt sich weiter mit Vorschlägen wie shape() (eine flexiblere Alternative zu path(), die CSS-freundliche Syntax anstelle von SVG-Pfad-Zeichenketten verwendet), die komplexe Formen ohne den SVG-Kontextwechsel ermöglichen. Die Browser-Unterstützung wird im Laufe von 2025 und 2026 ausgerollt.

Reale Arbeitsabläufe

• Diagonale Schnitte für Hero-Bereiche.Das Muster «trapezförmiger Hero», bei dem die untere Kante eines Hero-Bereichs diagonal statt horizontal abgewinkelt ist, ist eine der beliebtesten clip-path-Anwendungen. Ein einfaches polygon(0 0, 100% 0, 100% 90%, 0 100%) erzeugt eine 10%-Neigung von unten links nach oben rechts. Fügen Sie einen zweiten Bereich darunter mit der umgekehrten Neigung hinzu und Sie erhalten ein «zerrissenes Papier»- oder «gestapelte Winkel»-Layout, das absichtlich wirkt, ohne Bilder zu benötigen.
• Hexagonale Avatar-Raster.Team-Seiten, Mitwirkenden-Listen oder Sportroster verwenden oft hexagonale Foto-Ausschnitte als dynamischere Alternative zu runden Avataren. Ein Sechs-Eckpunkte-Polygon-clip-path erzeugt das Hexagon; CSS-Grid arrangiert das gestaffelte Wabenlayout. Im Vergleich zum Beschneiden in Photoshop bleiben die Fotos original und unverändert: Ändern Sie die Hex-Ausrichtung oder wechseln Sie zu Kreisen mit einer einzigen CSS-Bearbeitung.
• Hover-Bildenthüllungseffekte.Das Animieren von clip-path beim Hover erzeugt «Bildenthüllungen», bei denen ein beschnittener Teil sich glatt erweitert. Häufige Muster: Ein Bild beginnt als winziger Kreis und erweitert sich beim Hover zu voller Abdeckung, oder ein Polygon beginnt als dünner Schrägstrich und wächst zu einem vollen Rechteck. Der CSS-Übergang auf clip-path interpoliert zwischen zwei Polygonen mit der gleichen Eckpunktzahl glatt und erzeugt 60fps-Animationen ohne JavaScript.
• Benutzerdefinierte Schaltflächenformen.Spiel-UI, futuristische Schnittstellen und kreative Portfolios verwenden oft nicht-rechteckige Schaltflächen (Pfeilformen, Hexagone, Parallelogramme). clip-path maskiert ein Standard-Schaltflächenelement zur gewählten Form und hält die zugrunde liegende Schaltfläche barrierefrei (immer noch fokussierbar, immer noch per Tastatur klickbar, immer noch durch Screenreader ansagbar), während ein benutzerdefiniertes Visuelles präsentiert wird.
• Dekorative Abschnittstrenner.Wellen-Trenner, Chevron-Trenner und «zerrissene Seite»-Trenner zwischen Seitenabschnitten benötigten früher Hintergrund-SVG-Bilder oder Bilder pro Abschnitt. clip-path produziert sie in reinem CSS, entweder mit einem Inset mit abgerundeten Ecken oder einem Polygon, das der gewünschten Welle folgt. Die Trenner skalieren und reagieren automatisch auf Layout-Änderungen.
• Kreative Fotogalerien.Fotogalerien-Layouts mit einheitlichen rechteckigen Miniaturansichten fühlen sich generisch an; das Beschneiden jeder Miniaturansicht zu einer leicht anderen Polygonform erzeugt ein handgeschnittenes Collage-Gefühl, ohne jedes Bild manuell zu maskieren. Eine kleine Menge von 3 bis 5 Polygon-Varianten, die durch das Raster zyklisch durchgeschaltet werden, schafft visuellen Rhythmus, während sie performant bleibt (die gleiche Form wird einfach durch Transformation auf verschiedene Bildquellen angewendet).

Häufige Fallstricke und was sie bedeuten

• clip-path ändert nicht das Layout.Eine häufige Überraschung: Ein Element auf eine kleinere Form zu beschneiden, reduziert nicht den Platz, den es im Dokumentenfluss einnimmt. Das Element belegt immer noch sein volles Layout-Feld; clip-path ändert nur, was gezeichnet wird. Um ein Element zu erhalten, das physisch weniger Platz einnimmt, müssen Sie es auch verkleinern. Wenn Sie möchten, dass der beschnittene Inhalt tatsächlich beschnitten wird, verwenden Sie overflow: hidden auf einem Wrapper oder verwenden Sie CSS mask mit einem kleineren Layout-Feld.
• Seitenverhältnis-Diskrepanz bricht Prozentkoordinaten.In Prozent ausgedrückte Polygon-Koordinaten skalieren gleichmäßig mit dem Element. Eine Diamantform polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) bleibt bei jeder Größe ein Diamant, wird aber zu einem breiteren oder höheren Rhombus, wenn sich das Seitenverhältnis des Elements ändert. Für Formen, die über Seitenverhältnisse hinweg visuell konsistent bleiben müssen, verwenden Sie Pixelwerte oder min(50vw, 50vh)-Berechnungen oder beschränken Sie das Seitenverhältnis des Elements mit der CSS-Eigenschaft aspect-ratio.
• Beschnittene Bereiche sind nicht klickbar.Pointer-Ereignisse registrieren sich nur dort, wo das Element nach dem Beschneiden sichtbar ist. Eine zu einem Dreieck beschnittene Schaltfläche ist nur auf dem Dreieck klickbar, nicht auf dem unsichtbaren rechteckigen Raum, den sie einnimmt. Dies ist normalerweise erwünscht (keine versehentlichen Klicks auf leeren Raum), kann aber verwirrend sein, wenn sich mehrere beschnittene Schaltflächen überlappen oder wenn interaktiver Inhalt visuell über die Beschneidungsregion hinausgeht.
• Das Animieren vieler beschnittener Elemente ist teuer.clip-path löst bei jedem Animations-Frame Compositing aus, was die Frame-Raten senken kann, wenn es auf viele Elemente gleichzeitig oder auf große Elemente (Vollbild-Hero-Bereiche) angewendet wird. Für 60fps-Animationen begrenzen Sie die Anzahl der gleichzeitig animierenden beschnittenen Elemente, bevorzugen Sie einfachere Formen (4- bis 6-Eckpunkte-Polygone über 20-Eckpunkte) und erwägen Sie die Verwendung von CSS will-change: clip-path auf Elementen, die Sie animieren möchten, um dem Browser einen Hinweis zu geben, sie GPU-zu beschleunigen.
• Polygone benötigen übereinstimmende Eckpunktzahlen zum Morphen.Das Animieren von clip-path zwischen zwei Polygonformen funktioniert nur, wenn beide Polygone die gleiche Anzahl von Eckpunkten haben. Der Wechsel von einem Dreieck (3 Punkte) zu einem Quadrat (4 Punkte) schnappt sofort statt glatt zu morphen. Für glattes Morphen zwischen Formen unterschiedlicher visueller Komplexität definieren Sie beide Polygone mit der gleichen Anzahl von Punkten und platzieren die zusätzlichen an Koordinaten, die auf einer der Formen «verstecken» (z. B. zwei Punkte übereinander).
• Safari benötigt das -webkit-Präfix für SVG-Pfadsyntax.Die Grundformen (polygon, circle, ellipse, inset) funktionieren ohne Präfix in allen modernen Browsern. Aber Safari benötigt immer noch das -webkit-clip-path-Präfix bei der Verwendung der path()-Funktion oder beim Verweisen auf url(#id) SVG-clipPaths. Für browserübergreifende Kompatibilität deklarieren Sie sowohl -webkit-clip-path als auch clip-path mit dem gleichen Wert für SVG-pfadbasiertes Beschneiden. Auto-Präfixer (Autoprefixer, PostCSS) handhaben dies automatisch in modernen Build-Setups.

Datenschutz: alles läuft in Ihrem Browser

CSS-Generator-Tools fallen traditionell in zwei Lager: einfache HTML-Seiten mit clientseitigem JavaScript (privat, schnell, kein Konto erforderlich) und voll ausgestattete Editoren mit Cloud-gespeicherten Projekten (kollaborativ, aber jede Form-Bearbeitung wird auf jemandes anderen Server protokolliert). Dieses Tool ist fest im ersten Lager. Die Polygonkoordinaten, die Sie ziehen, die Farben, die Sie auswählen, das CSS, das Sie kopieren: alles bleibt in Ihrer Browser-Sitzung, wird nie irgendwohin gesendet. Aktualisieren Sie die Seite und der Zustand ist weg, es sei denn, Sie haben zuerst das CSS kopiert.

Die Datenschutzimplikation spielt vor allem für proprietäre Arbeit eine Rolle. Eine Design-Agentur, die eine benutzerdefinierte Schaltflächenform für ein vertrauliches Marken-Redesign prototypisiert, ein Indie-Entwickler, der an einer nicht angekündigten Spiel-UI arbeitet, ein Unternehmensteam, das Layouts für ein noch unter NDA stehendes Produkt entwirft: jeder Kontext, in dem die Form selbst oder ihre Iterationshistorie Informationen über laufende Arbeit verraten könnte. Mit diesem Tool existiert keines dieser Risiken, weil nichts erfasst wird. Öffnen Sie den Netzwerk-Tab des Browsers, während Sie Griffe ziehen, und Sie werden null ausgehende Anfragen sehen.

Wann ein anderes Tool die richtige Wahl ist

• SVG-Editoren für komplexe Pfade.Für unregelmäßige Kurven, kalligrafische Formen oder alles, was über die Grundformfunktionen hinausgeht, ist das Zeichnen der Form in Figma, Inkscape oder Adobe Illustrator und der Export als SVG-Pfad praktischer als das Codieren von clip-path-Koordinaten von Hand. Verwenden Sie dann clip-path: path('M...') oder verweisen Sie auf das SVG über die ID. SVG-Editoren bieten Bezier-Griffe und Präzision; clip-path-Generatoren nicht.
• CSS mask für Alpha-Mischung und Gradienten.clip-path produziert einen binären Alpha (vollständig sichtbar oder vollständig beschnitten). Für weichkantige Formen (Gradienten-Faden, Anti-Aliasing-Kurven, partielle Transparenz) handhabt CSS mask oder mask-image volle Alpha-Gradienten. mask unterstützt ein Maskenbild (jedes PNG, SVG oder Gradient), bei dem schwarze Pixel verbergen und weiße Pixel zeigen, mit Grautönen, die partielle Deckkraft geben. clip-path kann das nicht.
• Bildverarbeitung für dauerhafte Zuschnitte.Wenn Sie möchten, dass die endgültige Bilddatei selbst zu einer Form zugeschnitten ist (kleinere Dateigröße, kein clip-path-Overhead, kein Risiko eines nicht beschnittenen Fallbacks), führen Sie den Zuschnitt in einem Bildeditor oder unserem Image Compressor-Tool durch. clip-path ist für die Maskierung zur Anzeigezeit auf HTML-Elementen; wenn das Ziel ein statisches Bild-Asset ist, schneiden Sie die Datei direkt zu.
• Figma oder Sketch für Design-Mockups.Während des Prototypens eines Layouts bewältigen Figmas Vektorwerkzeuge die Erforschung komplexer Formen schneller als das Ziehen von clip-path-Griffen. Verwenden Sie das Design-Tool, um die gewünschte Form zu finden, dann übersetzen Sie die endgültige Form in clip-path CSS für die Produktion. Das Design-Tool handhabt auch Iterationen, Rückgängig-Historie und Team-Kommentare besser als ein Echtzeit-CSS-Generator.

Weitere häufig gestellte Fragen

Kann ich Prozentsätze oder Pixel für Eckpunktkoordinaten verwenden?

Beide funktionieren. Prozentsätze skalieren mit dem Element-Box, sodass ein in Prozent definiertes Polygon seine proportionale Form behält, wenn das Element die Größe ändert. Pixel sind absolut, sodass ein Polygon mit Pixelkoordinaten die gleiche Größe unabhängig vom Element behält. Verwenden Sie Prozentsätze für Formen, die mit dem Layout die Größe ändern sollen (die meisten Fälle), und Pixel für Formen, die exakte Pixelpositionen benötigen (z. B. Ausrichtung an einem bestimmten Designelement). Sie können auch mischen: polygon(50% 10px, 100% 50%, ...) ist gültig.

Wird clip-path SEO oder Screenreader beeinflussen?

Nein. clip-path ist eine rein visuelle Eigenschaft. Das zugrunde liegende HTML ist vollständig barrierefrei: Text innerhalb eines beschnittenen Elements wird immer noch von Suchmaschinen indiziert, immer noch von Screenreadern angesagt, immer noch durch Tastatur-Navigation auswählbar. Verwenden Sie clip-path für visuelles Styling; verwenden Sie es nicht, um Inhalt semantisch zu verbergen (das erfordert display: none oder aria-hidden-Attribute). Visuell beschnittener Inhalt bleibt im Barrierefreiheitsbaum vorhanden.

Wie mache ich einen clip-path responsiv?

Verwenden Sie Prozentsätze anstelle von Pixeln und überprüfen Sie das Ergebnis an verschiedenen Breakpoints. Für Formen, die unterschiedliche Proportionen auf Mobile versus Desktop benötigen, verwenden Sie CSS-Media-Queries, um den clip-path-Wert auszutauschen: deklarieren Sie einen anderen clip-path innerhalb von @media (max-width: 768px) für die Mobile-Form. Für komplexe responsive Anforderungen (z. B. ein Polygon, das auf Mobile zu einem Kreis wird) erwägen Sie die Verwendung von JavaScript, um den clip-path basierend auf der Fenstergröße neu zu berechnen, obwohl reine CSS-Ansätze die meisten Fälle handhaben.

Kann clip-path auf Videos und iframes angewendet werden?

Ja. clip-path funktioniert auf jedem HTML-Element, einschließlich <video> und <iframe>. Die Maske wird auf Elementebene angewendet, sodass ein zu einem Hexagon beschnittenes Video innerhalb dieses Hexagons abspielt. Die Video-Steuerungen (wenn angezeigt) werden ebenfalls beschnitten, was Play/Pause-Schaltflächen ungewollt verbergen kann; umhüllen Sie das Video mit einem Container-Element, wenn die Steuerungen außerhalb des beschnittenen Bereichs sichtbar sein sollen.

Wie hoch ist die maximale Anzahl von Polygon-Eckpunkten?

Es gibt keine formale Grenze, die vom CSS-Standard angegeben wird. Praktisch handhaben Browser Polygone mit Hunderten von Eckpunkten ohne Rendering-Fehler, aber die Leistung nimmt mit der Eckpunktzahl ab, besonders bei animierten clip-paths. Streben Sie 3 bis 12 Eckpunkte für die meisten dekorativen Formen an; wenn Sie mehr Komplexität benötigen, wechseln Sie zu einem SVG path() für sauberere Autorenschaft und ähnliche Leistungsmerkmale. Über 50 Eckpunkte hinaus wird clip-path schwieriger von Hand zu warten und ein SVG-Editor-Workflow macht mehr Sinn.

Kann ich Text beschneiden, nicht nur Bilder und Felder?

Ja. clip-path funktioniert auch auf Textelementen und maskiert sie wie jedes andere Element. Der visuelle Effekt ist «Text, der durch eine Form hindurchblickt». Für anspruchsvollere Text-Form-Effekte (z. B. die Verwendung eines Text-Umrisses als Beschneidungsmaske für ein Bild) kombinieren Sie clip-path mit background-clip: text, das die Textform selbst als Beschneidungsregion für den Hintergrund des Elements verwendet. Häufiges Muster: großer Text mit einem Gradient-Hintergrund, der nur innerhalb der Textformen sichtbar ist.