CSS Clip-Path Generator
Erstellen Sie CSS-Deklarationen für clip-path mit vordefinierten Formen wie Kreis, Ellipse, Dreieck oder Stern für Web-Layouts.
Tool ausführen
Mit diesem Generator erstellen Sie im Handumdrehen passende CSS-Deklarationen für die Eigenschaft clip-path, um Elemente im Webdesign präzise zuzuschneiden. Sie können zwischen verschiedenen geometrischen Formen wählen, darunter Kreis, Ellipse, Dreieck, Sechseck, Fünfeck, Stern und Raute. Für kreisförmige Masken legen Sie die Größe als Prozentwert sowie die Position im Element fest, beispielsweise zentriert oder an einer bestimmten Kante. Bei einer Ellipse wird die vertikale Achse automatisch proportional auf sechzig Prozent der angegebenen Größe skaliert. Alle Polygone wie Dreiecke, Sterne oder Sechsecke nutzen feste Prozentkoordinaten, die direkt als fertiger CSS-Code ausgegeben werden. Geben Sie eine unbekannte Form ein, verwendet das Werkzeug standardmäßig die Kreisform. Sie kopieren die erzeugte CSS-Regel einfach in Ihr Stylesheet, um Bilder, Schaltflächen oder Banner ohne zusätzliche Bildbearbeitungsprogramme direkt im Browser zuzuschneiden. Die Vorschau und der Code stehen sofort bereit.
Anleitung
- Wählen Sie die gewünschte Form aus oder geben Sie den englischen Namen wie circle, ellipse, triangle, hexagon, pentagon, star oder diamond ein.
- Geben Sie bei Kreisen und Ellipsen die gewünschte Größe als numerischen Prozentwert ein.
- Legen Sie bei Bedarf die Position fest, beispielsweise center, top left oder spezifische Prozentangaben.
- Kopieren Sie das erzeugte CSS-Code-Fragment für clip-path in Ihre Stylesheet-Datei.
Beispiele
- Kreis mit 40% Radius oben links: Form circle, Größe 40, Position top left erzeugt clip-path: circle(40% at top left);
- Sternmaske für Bildelemente: Form star erzeugt clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
FAQ
Welche Formen werden unterstützt?
Das Tool unterstützt vordefinierte Formen: circle, ellipse, triangle, hexagon, pentagon, star und diamond. Nicht erkannte Namen greifen auf die Standardform circle zurück.
Warum wirken sich Größe und Position nicht auf Sterne oder Dreiecke aus?
Die Polygon-Formen wie Dreieck, Sechseck, Fünfeck, Stern und Raute nutzen feste Koordinatenmuster. Die Parameter für Größe und Position steuern ausschließlich Kreis- und Ellipsen-Masken.
Wie wird die zweite Achse bei einer Ellipse berechnet?
Bei der Form ellipse wird der erste Radius aus der eingegebenen Größe übernommen und der zweite Radius automatisch mit dem Faktor 0,6 multipliziert.