CSS-Clip-Pfade erstellen

Clippy
Kommentare

In CSS lassen sich Element-Bereiche mithilfe verschiedener Methoden ein- und ausblenden, um ihnen so besonders auffällige Effekte zu verleihen. Dafür eingesetzt wird zum Beispiel das clip-path-Property.

Damit können komplexe Formen in CSS erstellt werden, indem ein Element an eine Grundform wie Kreis, Ellipse, Polygon oder Inset, oder eine SVG-Quelle geclippt wird. Mit Tools wie Clippy lassen sich Werte für die Formfunktionen für das clip-path-Property generieren, um sie anschließend in die eigene Website zu integrieren.

clip-path-Werte mit Clippy genieren

Clippy stellt zahlreiche verschiedene Grundformen zur Verfügung, die sich anhand verschiebbarer Punkte in die gewünschte Form ziehen lassen. Zudem besteht die Möglichkeit, sich zusätzlich das Äußere des Clip-Pfads anzeigen zu lassen. Ebenso lässt sich die Größe des Bilds verändern und unter verschiedenen Demo-Motiven wählen oder ein eigenes Bild über eine Custom-URL bearbeiten.

Screenshot Clippy Sternpolygon

Screenshot: Stern mit eingeblendetem äußerem Clip-Pfad als Ausgangsform

Neben der Auswahl aus verschiedenen, auf Polgyonen basierenden Formen, gibt es auch die Möglichkeit, ein eigenes Polygon zu definieren. Die Demoversion findet sich auf der Projekt-Website; zudem gibt es weitere Informationen zum Tool auf GitHub.

Aufmacherbild: Wooden blocks, different primary shapes and colors for children von Shutterstock / Urheberrecht: fotoecho_com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -