ClipPath Generator

Erstelle CSS clip-path Definitionen für individuelle Formen

▲Triangle ▬Rectangle ⬠Pentagon ⬡Hexagon ⯃Octagon ★Star ◆Diamond ›Chevron ▱Parallelogram ⏢Trapezoid ✚Cross ➤Arrow Right ◀Arrow Left ▲Arrow Up ▼Arrow Down ▨Bevel 💬Message ✕Close ♥Heart 🛡Shield 🔖Bookmark 💎Gem

Anleitung

Schiebe die jeweiligen Endpunkte, um die Form zu verändern. Wenn Du auf eine Linie klickst, wird ein neuer Punkt hinzugefügt. Mit der rechten Maustaste kannst Du Endpunkte entfernen.

Klicke auf das Refresh-Icon um neu zu beginnen. Unterhalb wird dir der dazugehörige CSS Code live angezeigt.

Einstellungen

Farbe

# Kein Clip-path definiert