CSS Clip-Path Formen-Generator

So funktioniert es

Geben Sie die Füllfarbe in das linke Feld ein — HEX, RGB und HSL werden erkannt — und wählen Sie per Tippen oder Klicken eine Form aus der Liste; Code und Vorschau erneuern sich bei jeder Änderung. Das Sechseck erzeugt zum Beispiel polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%): sechs Eckpunkte, angegeben als Prozent des Kastens. Weil die Koordinaten Prozente sind, zeichnet derselbe Code dieselbe Form auf einem 40-Pixel-Abzeichen wie auf einem 400-Pixel-Banner; die Zeile aspect-ratio: 1 / 1 hält den Kasten quadratisch, ohne sie dehnt sich die Form mit dem Kasten. Kopieren Sie den Code in Ihren eigenen Selektor; die background-Zeile ist nur eine Demo-Füllung — zum Zuschneiden eines eigenen Bildes löschen Sie sie und setzen die clip-path-Zeile direkt auf das img-Element. Die Schaltfläche Herunterladen speichert die Vorschau als 1200×800-Pixel-PNG.

Dieses Werkzeug ist auch als css clip path generator, clip path polygon, css formen erstellen, css sechseck code, css stern form, clip path kreis bekannt.

Was ist clip-path?

clip-path ist die CSS-Eigenschaft, die festlegt, welcher Bereich eines Elements gemalt wird: das Innere des definierten Pfads bleibt sichtbar, alles außerhalb wird vollständig durchsichtig. Der Pfad kennt vier Schreibweisen — polygon() mit einer Eckenliste, circle() und ellipse() mit Kurven, inset() mit einem eingerückten Rechteck. Der Zuschnitt betrifft nur die Darstellung; Position, Größe und Inhalt des Elements bleiben unberührt. Fotoecken kappen, Abzeichen und Bänder bauen, Bilder in geometrische Rahmen setzen — das sind die häufigsten Aufgaben, alle mit einer Zeile CSS und ohne Bildbearbeitung.

Was ist polygon()-Koordinaten?

polygon() ist die clip-path-Schreibweise, die eine Form über ihre Eckpunkte definiert: jeder Punkt ist ein Paar aus "Abstand von links, Abstand von oben", getrennt durch Kommas. Die Werte stehen meist in Prozent, weil Prozente mit dem Kasten skalieren — derselbe Sterncode funktioniert auf einem kleinen Symbol wie auf einem seitenbreiten Banner; mit Pixeln bliebe die Form starr und säße bei wachsendem Kasten in einer Ecke. Die Punkte werden nacheinander verbunden; in falscher Reihenfolge kreuzen sich die Kanten und die Form zerfällt in unerwartete Teile.

Was ist der Unterschied zwischen clip-path und overflow: hidden?

overflow: hidden beschneidet nur rechteckig: Inhalt, der aus dem Kasten quillt, wird versteckt, aber die Silhouette des Kastens kommt nie über ein Rechteck mit runden Ecken hinaus. clip-path schneidet den Kasten entlang eines beliebigen geometrischen Pfads — Stern, Sechseck, Pfeil, freies Vieleck — und formt dabei das Element selbst, statt Überlauf zu verbergen. Die beiden beantworten verschiedene Fragen: für "verstecke das Überstehende" genügt overflow und ist billiger; für "dieses Element soll kein Rechteck sein" ist clip-path der einzige Weg. Beides lässt sich kombinieren: außen overflow für die Scroll-Kontrolle, innen clip-path für die Form.

Die Zuschnitt-Falle: der unsichtbare Bereich braucht weiter Platz

clip-path beschneidet nur die Darstellung, nicht den Kasten: ein auf ein Dreieck zugeschnittenes Element belegt im Seitenlayout weiterhin sein volles Rechteck, und Nachbarelemente rücken nicht in die leer wirkenden Ecken. Die Klickfläche folgt dagegen in den meisten Browsern der zugeschnittenen Form — ein Klick auf die unsichtbare Ecke bewirkt nichts; das ist das definierte Verhalten der Eigenschaft, kein Fehler.

Die zweite häufige Überraschung ist der Schatten: box-shadow wird um das Rechteck des Kastens gezeichnet und vom Zuschnitt mit abgeschnitten, eine zugeschnittene Form zeigt also keinen Schatten. Brauchen Sie einen, nehmen Sie filter: drop-shadow() statt box-shadow; drop-shadow folgt der gemalten Form und wirft den Schatten entlang der echten Sternkante.

Prozente lesen und die Form selbst verändern

Jedes Paar in polygon() ist ein Eckpunkt: die erste Zahl ist der Abstand von links, die zweite von oben, 0% und 100% sind die Kastenkanten. Die Punkte werden in der geschriebenen Reihenfolge durch Linien verbunden, der letzte schließt zum ersten. Nehmen Sie den erzeugten Code als Ausgangspunkt: rücken Sie die oberen Ecken des Trapezes zusammen, nähert es sich dem Dreieck, ziehen Sie sie auseinander, dem Rechteck.

Auch die Animation zwischen zwei Formen läuft über diese Koordinaten: transition: clip-path blendet nur dann weich zwischen zwei polygon()-Werten über, wenn die Punktzahlen übereinstimmen. Darum wechseln Achteck und abgeschrägter Rahmen in diesem Werkzeug (beide 8 Punkte) sauber ineinander, während Sechseck zu Stern ohne Übergang springt.

Häufige Fragen

Kann ich ein Foto in die zugeschnittene Form legen?

Ja — genau das ist die Hauptaufgabe von clip-path: der Code gilt für jedes Element, auf einem img-Tag wird das Foto selbst in die Form geschnitten. Die background-Zeile im erzeugten Code ist nur eine Demo-Füllung; löschen Sie sie beim eigenen Bild und setzen Sie die clip-path-Zeile auf das Bildelement. Nehmen Sie die aspect-ratio-Zeile mit, sonst verzerrt sich die Form mit den Bildproportionen.

Warum verwenden Kreis und Ellipse kein polygon()?

Eine gebogene Kante lässt sich mit Eckpunkten nur annähern; es bräuchte Dutzende, und die Kante bliebe trotzdem facettiert. clip-path hat dafür eigene Schreibweisen: circle(50% at 50% 50%) definiert über Mittelpunkt und Radius, ellipse(50% 35% at 50% 50%) über zwei Radien. Beide sind mathematische Kurven und bleiben in jeder Größe glatt; dieses Werkzeug wählt für die beiden Formen automatisch die richtige Schreibweise.

Was passiert in Browsern ohne clip-path-Unterstützung?

Ein sehr alter Browser, der clip-path nicht kennt, ignoriert die Eigenschaft schlicht: das Element erscheint unbeschnitten als volles Rechteck — kein Inhalt geht verloren, nur die Zierform entfällt. Aktuelle Versionen von Chrome, Firefox, Safari und Edge unterstützen polygon, circle und ellipse ohne Präfix; nur seit Jahren nicht aktualisierte Safari-Versionen verlangen noch -webkit-clip-path.

Kann ich einen Rahmen (border) um die Formkante ziehen?

Nicht direkt: border gehört zum Rechteck des Kastens, und der Zuschnitt schneidet ihn mit ab; übrig bleiben nur die Stücke innerhalb der Form. Der übliche Ausweg sind zwei Ebenen: geben Sie dem äußeren Element die Form und die Rahmenfarbe und verschachteln Sie ein zweites Element mit demselben, um wenige Prozent verkleinerten clip-path; der Streifen dazwischen wirkt wie ein Rahmen.