CSS Clip-Path Generator

So verwenden Sie den Clip-Path Generator

1. Wählen Sie eine Form: Polygon, Kreis, Ellipse oder Inset. Die blasse Ebene zeigt das ganze Element, die kräftige Ebene zeigt, was nach dem Zuschneiden sichtbar bleibt.
2. Ziehen Sie die Punkte im Editor. Beim Polygon ist jeder Punkt eine Ecke; ein Klick irgendwo in die Fläche fügt einen Punkt auf der nächstgelegenen Kante ein. Bei Kreis und Ellipse ziehen Sie den Mittelpunkt und die Radiuspunkte, beim Inset die vier Kantenpunkte.
3. Feinjustieren Sie in den Feldern darunter: in der Liste Punkte (X und Y in Prozent, mit Entfernen und Punkt hinzufügen) für Polygone oder in den Feldern Radius, Mittelpunkt X, Mittelpunkt Y, Oben, Rechts, Unten, Links und Abgerundete Ecken (px) für die anderen Formen.
4. Schneller geht es mit den Vorlagen: Dreieck, Trapez, Parallelogramm, Raute, Fünfeck, Sechseck, Achteck, abgeschrägte Ecken, Stern, Kreuz, Pfeile, Chevron, Sprechblase, Kreis, Ellipse und Inset.
5. Aktivieren Sie Auf 5 % einrasten für glatte Werte und -webkit-clip-path hinzufügen (altes Safari), wenn Sie noch Safari 13.0 oder älter unterstützen.
6. Legen Sie bei Bedarf ein Foto unter Hintergrundbild (optional) ab, um die Form auf Ihrem eigenen Bild zu sehen. Die Datei wird nie hochgeladen.
7. Kopieren Sie den CSS-Code mit Kopieren.

Tastatur: Fokussieren Sie einen Punkt, verschieben Sie ihn mit den Pfeiltasten (1 % oder mit Umschalt 10 %) und drücken Sie Entf, um einen Polygonpunkt zu löschen. Ein Polygon behält immer mindestens drei Punkte.

Die Formfunktionen von clip-path

clip-path blendet alles außerhalb einer Form aus. Das Element behält seine Größe im Layout; nur die Darstellung und die klickbare Fläche werden beschnitten.

• polygon(x1 y1, x2 y2, …) verbindet die Punkte der Reihe nach und schließt die Form. polygon(50% 0%, 100% 100%, 0% 100%) ist ein nach oben zeigendes Dreieck. Die Koordinaten beginnen in der linken oberen Ecke des Elements.
• circle(r at cx cy): circle(50% at 50% 50%) ist der größte im Element zentrierte Kreis. Ein prozentualer Radius bezieht sich auf die Diagonale des Elements geteilt durch √2 – er entspricht also nur bei quadratischen Elementen einem Anteil der Breite.
• ellipse(rx ry at cx cy): Der horizontale Radius ist ein Anteil der Breite, der vertikale ein Anteil der Höhe.
• inset(top right bottom left round radius) schneidet ein Rechteck innerhalb der Kanten aus, mit derselben Kurzschreibweise aus ein bis vier Werten wie bei margin und optional abgerundeten Ecken.

Dieses Tool schreibt Prozentwerte, damit die Form mit dem Element mitwächst, egal wie groß es ist.

Tipps für saubere Formen

• Die Reihenfolge der Polygonpunkte ist wichtig: Wenn Sie die Kante im Uhrzeigersinn (oder dagegen) abgehen, vermeiden Sie überkreuzte „Schleifen“-Formen.
• Zwei Formen mit gleich vielen Punkten lassen sich animieren: transition: clip-path 0.4s verwandelt ein Sechseck fließend in ein anderes Sechseck. Zwischen Polygonen mit unterschiedlicher Punktzahl kann der Browser nicht interpolieren.
• clip-path schneidet auch box-shadow und Rahmen ab. Für einen Schatten um eine zugeschnittene Form setzen Sie filter: drop-shadow() auf ein Elternelement.
• Abgeschnittene Bereiche reagieren nicht auf Klicks oder Hover – praktisch für unregelmäßig geformte Buttons.