CSS-clip-path-Generator
Zeichne Polygonmasken mit Vorschau und kopierbarem CSS.
So verwendest du CSS-clip-path-Generator
CSS clip-path maker turns a list of x,y percentage points into a clip-path: polygon() rule and shows it applied to a gradient box. Enter 3 to 50 points, one pair per line, with each coordinate between 0 and 100. The default four points form a trapezoid, and the generated declaration can be copied straight into a stylesheet.
- Gib die angeforderten Werte im Einstellungsbereich ein.
- Lege die Polygonpunkte fest (% x,y; ein Paar pro Zeile).
- Führe den CSS-clip-path-Generator aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.
Was dieses Tool unterstützt
Zeichne Polygonmasken mit Vorschau und kopierbarem CSS.
- Polygonpunkte (% x,y; ein Paar pro Zeile)
- Set this value for your task.
Grenzen und Verarbeitung
Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.
Häufige Fragen
How do I make a triangle with CSS clip-path?
Enter three points on separate lines: 50,0 then 100,100 then 0,100. The tool outputs clip-path: polygon(50% 0%, 100% 100%, 0% 100%); which clips the element to an upward-pointing triangle that scales with its size.
Can I use pixel values in the clip-path maker?
No. Each coordinate is read as a percentage of the element's width or height and must be between 0 and 100; anything else returns an error. Percentages keep the shape proportional when the element resizes.
Does the clip-path maker support circle() or ellipse()?
No. It only generates polygon() shapes. You can approximate a circle with many points, up to the 50-point limit, or write a circle() value yourself after copying the polygon rule.
Wo wird meine Eingabe verarbeitet?
Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.
Welche Eingabelimits gelten?
Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.