CSS-Clip-Pfad-Generator
Suchen Sie nach einer einfachen Möglichkeit, komplexe Formen mit CSS zu erstellen? Mit unserem kostenlosen CSS-Clip-Pfad-Generator können Sie Clip-Pfad-Code für Polygon-, Kreis-, Ellipse- und path () -Funktionen visuell entwerfen und exportieren. Egal, ob Sie einen diagonalen Schnitt, eine Sternform, eine Sprechblase oder ein beliebiges benutzerdefiniertes Polygon benötigen, Sie können Griffe auf eine Live-Leinwand ziehen, Koordinaten anpassen und produktionsfertiges CSS sofort kopieren. Sie müssen sich keine Syntax merken oder Punkte von Hand berechnen — unser Tool übernimmt die Mathematik, sodass Sie sich auf das Design konzentrieren können. Perfekt für Landingpages, Heldenabschnitte, Bildmasken und kreative Layouts. Probieren Sie es jetzt aus und sehen Sie, wie Ihre Formen in Echtzeit zum Leben erweckt werden!
Was ist
Mit der CSS-Eigenschaft clip-path können Sie einen sichtbaren Bereich für jedes HTML—Element definieren - alles außerhalb des Bereichs wird abgeschnitten. Es ist eines der leistungsstärksten Werkzeuge im modernen CSS zum Erstellen nicht rechteckiger Layouts. Im Gegensatz zu overflow: hidden, das nur an der Box befestigt wird, unterstützt clip-path komplexe Geometrien, einschließlich Polygonen mit beliebigen Scheitelpunkten, Kreisen mit einstellbaren Radien, Ellipsen in jedem Winkel und sogar SVG-basierten Pfaden über die Funktion path (). Allgemeine Clip-Pfad-Werte: * polygon () - Definieren Sie eine geschlossene Form mit einer Liste von xy-Punkten. Beispiel: Polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) erzeugt einen Diamanten. * Kreis() — zeichnet einen Kreis mit einem Radius und optionaler Position. Beispiel: Kreis(40% bei 50% 50%). * ellipse() - zeichnet eine Ellipse mit zwei Radien. Beispiel: Ellipse(60% 30% bei 50% 50%). * Einfügung () - Schneidet einen rechteckigen Bereich mit optionalem Randradius ab. Beispiel: Einfügung (10% rund 8 Pixel). * path() - verwendet eine SVG-Pfadzeichenfolge für maximale Flexibilität. Die Browserunterstützung ist hervorragend - alle modernen Browser (Chrome 55+, Firefox 54+, Safari 9+, Edge 79+) unterstützen die Standardsyntax, wobei das Präfix -webkit- nicht mehr benötigt wird. Die Clip-path-Eigenschaft funktioniert für Bilder, Divs, Überschriften, SVG-Elemente und mehr. In Kombination mit CSS-Animationen können Sie glatte Morphing-Effekte zwischen Formen erstellen. Unser Generator erleichtert das Schreiben der Clip-Pfad-Syntax. Anstatt Prozentsätze zu erraten, ziehen Sie Kontrollpunkte auf eine visuelle Leinwand, und das Werkzeug gibt sauberes CSS mit Präfix aus. Sie können auch vorhandene Clip-Pfad-Werte importieren, um sie zu bearbeiten, zwischen Koordinateneinheiten (Prozentsätze oder Pixel) zu wechseln und das Ergebnis als einbaufertigen Codeblock zu exportieren.
Wie zu verwenden
- Öffnen Sie den CSS-Clippfad-Generator in Ihrem Browser. Eine leere Leinwand mit einem Beispielelement wird angezeigt.
- Wählen Sie eine Formvorgabe aus der Symbolleiste — Dreieck, Sechseck, Stern, Pfeil, Raute oder wählen Sie 'Benutzerdefiniert', um von vorne zu beginnen.
- Ziehen Sie die Kontrollpunkte auf der Leinwand, um das Polygon neu zu formen. Jeder Punkt rastet präzise am Raster ein. Sie können neue Punkte hinzufügen, indem Sie entlang der Kante klicken oder Punkte entfernen, indem Sie mit der rechten Maustaste klicken.
- Passen Sie die globalen Einstellungen an: Wählen Sie zwischen Prozent- oder Pixelausgabe, schalten Sie die Füllregel um (ungleich Null vs gleichmäßig) und legen Sie den Transformationsursprung fest, wenn Sie die Form animieren möchten.
- Kopieren Sie das generierte CSS aus dem Ausgabefenster. Der Code enthält die Eigenschaft clip-path und die erforderlichen Herstellerpräfixe. Fügen Sie es in Ihr Stylesheet oder Inline-Stilattribut ein.
- Testen Sie browserübergreifend mit der integrierten Kompatibilitätsprüfung und wenden Sie dann CSS-Übergänge an, um animierte Clip-Pfad-Morphing-Effekte zu erstellen.
Beispiele
Eingabe: Polygon: 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%
Prozess: Map 5 points on coordinate plane → Connect sequentially → Create pentagon shape
Ergebnis: clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
Eingabe: Circle: circle(50% at 50% 50%)
Prozess: Define radius 50% → Center at 50%,50% → Generate ellipse path
Ergebnis: clip-path: circle(50% at 50% 50%)
Eingabe: Inset: inset(10% 20% 30% 40% round 12px)
Prozess: Calculate 4 offsets → Apply border-radius → Clip content area
Ergebnis: clip-path: inset(10% 20% 30% 40% round 12px)
Verwandte Suchen
Leute suchen auch nach: CSS, Clip-Pfad, Formen, Polygon, Pfad.
CSSClip-PfadFormenPolygonPfad
Häufig gestellte Fragen
Was ist der Unterschied zwischen Clip-Pfad und Überlauf: versteckt?
überlauf: Einfach schneidet den Inhalt in den rechteckigen Begrenzungsrahmen des Elements ein. Es können keine diagonalen Schnitte oder komplexen Polygone erstellt werden. clip-Pfad hingegen definiert einen benutzerdefinierten Beschneidungsbereich, der eine beliebige Form haben kann - Kreise, Sterne, Pfeile oder beliebige Polygone mit Dutzenden von Eckpunkten. Wenn Sie einen Rechteckschnitt benötigen, funktioniert der Überlauf einwandfrei. Für alles, was nicht rechteckig ist, ist Clip-path der richtige Weg.
Kann ich Clip-Pfade mit CSS-Übergängen oder Keyframe-Animationen animieren?
Jawohl! Sie können den Clip-Pfad zwischen zwei Formen mit der gleichen Anzahl von Punkten mithilfe von CSS-Übergängen oder @Keyframes animieren. Für ein glattes Morph müssen sowohl die Start- als auch die End-Polygon() -Funktionen die gleiche Anzahl von Scheitelpunktkoordinaten haben. Zum Beispiel Übergang vom Polygon(50% 0%, 100% 100%, 0% 100%) zu Polygon(50% 10%, 90% 90%, 10% 90%) funktioniert reibungslos. Wenn sich die Punktzahlen unterscheiden, rastet der Browser sofort ohne Interpolation ein.
Beeinflusst der Clip-Pfad Klickereignisse und die Barrierefreiheit?
clip-path ändert die visuelle Sichtbarkeit eines Elements, ändert jedoch NICHT dessen Begrenzungsrahmen im DOM. Klickereignisse, Fokusrechtecke und Bildschirmleserbereiche folgen weiterhin dem ursprünglichen rechteckigen Feld. Dies ist eine häufige Quelle der Verwirrung — ein Element, das wie ein Diamant aussieht, nimmt immer noch seinen vollen rechteckigen Bereich für Zeigerereignisse ein. Wenn Sie präzise Treffertests benötigen, sollten Sie stattdessen SVG mit clipPath verwenden.
Wie erstelle ich einen responsiven Clip-Pfad, der sich an verschiedene Bildschirmgrößen anpasst?
Verwenden Sie prozentuale Koordinaten in Polygon (), Kreis () oder Ellipse () anstelle von festen Pixeln. Prozentsätze beziehen sich auf den Begrenzungsrahmen des Elements, sodass Ihre Form proportional skaliert wird, wenn die Größe des Elements geändert wird. Alle von unserem Tool generierten Formen werden standardmäßig in Prozent ausgegeben - stellen Sie nur sicher, dass Sie nicht in den Pixelmodus wechseln, wenn Reaktionsfähigkeit wichtig ist.
Kann ich Clip-Pfad auf Hintergrundbildern und Verläufen verwenden?
Absolut. clip-Pfad gilt für das gesamte Element einschließlich Hintergrund, Hintergrundbild und Hintergrundverlauf. Sie können einen Verlaufshintergrund auf einem Div platzieren und ihn dann in eine Sechseckform schneiden — der Verlauf ist nur innerhalb des abgeschnittenen Bereichs sichtbar. Diese Technik eignet sich hervorragend für kreative Heldenschnitte und dekorative Bilderrahmen, ohne dass eine externe Bildbearbeitungssoftware erforderlich ist.