CSS-Clip-Path für Kreis und Ellipse erstellen

Wählen Sie eine benannte Form und passen Sie bei Kreis oder Ellipse optional Größe und Position an. Danach erzeugt das Werkzeug ein CSS-Snippet mit einer clip-path-Deklaration.

Wofür der CSS-Clip-Path-Generator geeignet ist

Mit dem CSS-Clip-Path-Generator lassen sich CSS-Snippets für die Maskierung von Elementen erstellen. Sie wählen dafür eine benannte Form und können bei Kreisen und Ellipsen zusätzlich Größe und Position festlegen. Für andere unterstützte Formen verwendet das Werkzeug feste Polygon-Koordinaten.

CSS-Clip-Path-Snippet erstellen

1. Öffnen Sie den CSS-Clip-Path-Generator und wählen Sie eine Form aus. Unterstützt werden Kreis, Ellipse, Dreieck, Sechseck, Fünfeck, Stern und Raute. Wenn Sie keine Form angeben, wird standardmäßig ein Kreis verwendet.

2. Legen Sie bei einem Kreis oder einer Ellipse die Größe fest, sofern der Standardwert nicht passt. Ohne Eingabe gilt die Größe 50. Beim Kreis wird dieser Wert als Prozentangabe verwendet. Bei der Ellipse bildet er die erste Prozentangabe; die zweite ergibt sich aus dem Wert multipliziert mit 0,6.

3. Bestimmen Sie die Position für Kreis oder Ellipse. Ohne Eingabe wird die Mitte verwendet. Die gewählte Position wird in der CSS-Deklaration hinter at eingesetzt, sodass beispielsweise eine Platzierung am Rand oder in einer Ecke möglich ist.

4. Lassen Sie das Ergebnis erzeugen und übernehmen Sie das angezeigte CSS-Snippet für das Element, das maskiert werden soll. Prüfen Sie anschließend, ob Form, Größe und Position zur gewünschten Darstellung passen.

5. Für Dreieck, Sechseck, Fünfeck, Stern und Raute können Sie die jeweilige Vorlage auswählen. Diese Formen beruhen auf festen Prozentkoordinaten. Änderungen an Größe oder Position verändern diese Polygonvorlagen daher nicht.

Verwenden Sie für eine überschaubare Eingabe zunächst eine der benannten Formen. So können Sie die Ausgabe leichter der gewählten Geometrie zuordnen und bei Kreisen oder Ellipsen gezielt mit den beiden veränderlichen Angaben arbeiten.

Ergebnis richtig einordnen

Das Ergebnis ist ein CSS-Snippet mit einer clip-path-Deklaration zur Maskierung eines Elements. Bei einem Kreis beschreibt die Größe den verwendeten Prozentwert, während die Position nach at angegeben wird. Bei einer Ellipse sind die beiden Prozentwerte nicht unabhängig: Der zweite Wert entspricht 60 Prozent der eingegebenen Größe, und beide Werte werden an der gewählten Position platziert.

Bei Dreieck, Sechseck, Fünfeck, Stern und Raute sollten Sie die Ausgabe als feste Formvorlage verstehen. Die festgelegten Koordinaten bleiben gleich, auch wenn Sie andere Werte für Größe oder Position eingeben. Wenn ein nicht unterstützter Name verwendet wird, wird dieser nicht als frei definierte Geometrie behandelt, sondern auf die Kreisgeometrie zurückgeführt.

Die Eingabe verändert also nicht jede Form auf dieselbe Weise. Größe und Position sind besonders für Kreis und Ellipse relevant; bei den Polygonvorlagen steht die jeweilige feste Kontur im Vordergrund. Kontrollieren Sie deshalb vor der Übernahme, ob die erzeugte Deklaration zur ausgewählten Form passt.

Praktisches Beispiel

Sie möchten ein Element mit einem kleineren Kreis an der linken mittleren Position maskieren.

Wählen Sie die Form Kreis, tragen Sie als Größe 40 und als Position left center ein und lassen Sie das Ergebnis erzeugen.

Ein CSS-Snippet mit einer clip-path-Deklaration für einen Kreis, dessen Prozentwert der eingegebenen Größe entspricht und dessen Position hinter at steht.

Einschränkungen

• Größe und Position beeinflussen nur Kreis und Ellipse. Die Vorlagen für Dreieck, Sechseck, Fünfeck, Stern und Raute verwenden feste Koordinaten; nicht unterstützte Formnamen führen zur Kreisgeometrie.

Häufige Fehler

• Nicht unterstützter Formenname: Ein abweichender Name erzeugt keine eigene Geometrie, sondern verwendet die Kreisgeometrie. Wählen Sie stattdessen einen der sieben unterstützten Namen aus.

Häufige Fragen

Was passiert, wenn ich keine Form auswähle?

Ja. Ohne Angabe der Form verwendet das Werkzeug standardmäßig einen Kreis.

Wie wirken sich Größe und Position auf Kreis und Ellipse aus?

Bei einem Kreis wird die Größe als Prozentwert verwendet und die Position hinter at gesetzt. Bei einer Ellipse wird zusätzlich ein zweiter Prozentwert aus 60 Prozent der eingegebenen Größe gebildet.

Kann ich die Polygonformen mit Größe und Position verändern?

Nein. Dreieck, Sechseck, Fünfeck, Stern und Raute verwenden feste Prozentkoordinaten. Größe und Position verändern diese Polygonvorlagen nicht.