Developer Tools
Design Tools
Web UtilitiesCSS Clip-Path-Generator
Erstellen Sie CSS clip-path für Polygone, Kreise und Ellipsen mit einem visuellen Drag-and-Drop-Editor. Verwenden Sie Voreinstellungen für gängige Formen wie Pfeile, Dreiecke und Sterne. Kopieren Sie das CSS sofort.
Punkt 1
Punkt 2
Punkt 3
Punkt 4
CSS-Eigenschaft
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}CSS-Wert
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)Verwandte Werkzeuge
Über Dieses Werkzeug
Wie Es Funktioniert
- Wählen Sie einen Formtyp: Polygon, Kreis oder Ellipse
- Ziehen Sie die Kontrollpunkte auf der Vorschauleinwand, um den Clip-Pfad umzuformen
- Passen Sie Einstellungen mit Schiebereglern und Eingaben für präzise Steuerung an
- Kopieren Sie den generierten CSS clip-path-Wert zur Verwendung in Ihren Stylesheets
- Verwenden Sie Voreinstellungen für gängige Formen wie Pfeile, Dreiecke und Sterne
- Sehen Sie sich die Vorschau des Clip-Pfads auf einem echten Bild oder einfarbigem Hintergrund an
Häufige Anwendungsfälle
- Nicht-rechteckige Bildausschnitte für Hero-Bereiche erstellen
- Diagonale oder Chevron-Abschnittstrennzeichen bauen
- Profilbilder oder Abzeichen in Polygonform gestalten
- Geometrische Bildmasken für Galerien erstellen
- Pfeilförmige Call-to-Action-Schaltflächen bauen
- Benutzerdefiniert geformte UI-Karten und Tooltips gestalten
Häufig Gestellte Fragen
Was ist CSS clip-path?
Die CSS-Eigenschaft clip-path ermöglicht es, einen Ausschneidebereich für ein Element zu definieren — nur der Teil innerhalb des Bereichs ist sichtbar, alles außerhalb wird ausgeblendet. Sie unterstützt Formen wie polygon(), circle(), ellipse() und path() und ermöglicht nicht-rechteckige Elemente, diagonale Abschnittstrennzeichen und geometrische Bildmasken.
Wie ziehe ich Kontrollpunkte in der Vorschau?
Wenn der Formtyp Polygon ausgewählt ist, erscheinen blaue runde Griffe auf der Vorschauleinwand an jedem Eckpunkt des Polygons. Klicken und ziehen Sie jeden Griff, um ihn neu zu positionieren. Die CSS-Ausgabe wird sofort beim Ziehen aktualisiert.
Was bedeuten die X- und Y-Prozentsätze?
clip-path-Polygon-Koordinaten werden als Prozentsätze der Breite und Höhe des Elements ausgedrückt. 0% 0% ist die obere linke Ecke, 100% 0% die obere rechte, 100% 100% die untere rechte und 0% 100% die untere linke Ecke.
Wie füge ich Polygon-Punkte hinzu oder entferne sie?
Verwenden Sie die Schaltfläche "+ Punkt hinzufügen", um einen neuen Kontrollpunkt in der Mitte (50% 50%) hinzuzufügen, dann ziehen Sie ihn oder bearbeiten Sie die X/Y-Werte. Um einen Punkt zu entfernen, klicken Sie auf "− Entfernen" daneben. Ein Polygon benötigt mindestens 3 Punkte.
Welche voreingestellten Formen sind verfügbar?
Das Werkzeug enthält 12 Polygon-Voreinstellungen: Dreieck, Raute, Pfeil rechts, Pfeil links, Fünfeck, Sechseck, Stern, Chevron, Neigung links, Neigung rechts, Fase und Nut.
Wie funktioniert der Kreis-clip-path?
Die Auswahl des Formtyps Kreis erzeugt einen clip-path: circle(r% at cx% cy%)-Wert. Der Radius-Schieberegler steuert die Kreisgröße, und die Mittelachse-X/Y-Schieberegler verschieben den Mittelpunkt.
Was ist der Unterschied zwischen Kreis und Ellipse?
Ein Kreis-clip-path nimmt einen einzigen Radius an und erzeugt eine perfekt runde Ausschneideform. Ein Ellipsen-clip-path nimmt separate X-Radius (rx) und Y-Radius (ry)-Werte an, um ovale Formen zu erstellen.
Wie kopiere ich das generierte CSS?
Im CSS-Ausgabeabschnitt gibt es zwei Kopierschaltflächen. "CSS kopieren" kopiert die vollständige CSS-Regel mit dem .element-Selektor. "Wert kopieren" kopiert nur den clip-path-Wert zum Einfügen in eine bestehende Regel.
Wird clip-path in allen Browsern unterstützt?
CSS clip-path mit grundlegenden Formen (polygon, circle, ellipse) wird in allen modernen Browsern einschließlich Chrome, Firefox, Safari und Edge gut unterstützt. Die Eigenschaft benötigt keine Anbieter-Präfixe für grundlegende Formen.
Kann ich clip-path-Formen animieren?
Ja! CSS clip-path kann zwischen Formen gleichen Typs mit gleicher Punktanzahl fließend übergehen und animiert werden. Zum Beispiel: "transition: clip-path 0.4s ease".
Wie verwende ich clip-path für Abschnittstrennzeichen?
Wenden Sie ein Polygon-clip-path auf ein vollbreites Abschnittselement an, um diagonale oder Chevron-Übergänge zwischen Seitenabschnitten zu erstellen. Verwenden Sie die Voreinstellungen Neigung links oder rechts als Ausgangspunkt.
Was ist die Vorschau-Hintergrundbild-Option?
Wenn Sie den Vorschauhintergrund auf "Bild" umschalten, wird die Vorschau mit einem Farbverlauf (Indigo zu Pink) statt einer Volltonfarbe gefüllt. Dies hilft Ihnen zu sehen, wie das clip-path auf einem Foto oder reichhaltigem Hintergrund aussehen würde.