01
Vorlagenwechsel bestätigen
Ein Stern oder Pfeil ersetzt vorhandene Punkte erst nach einer Vorschau mit Punktzahl. Nach dem Anwenden stellt Rückgängig die eigene Form wieder her.
HTML- und CSS-Werkzeuge
CSS-Clip-Path-GeneratorPunkte ziehen, CSS kopieren
Verschieben Sie Polygonpunkte oder ändern Sie Grundformen und prüfen Sie die CSS-Deklaration.
CSS-Clip-Path-Generator
Formvorschau
CSS-Ergebnis
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);Koordinaten und CSS werden nur in Ihrem Browser erzeugt.
CSS ist bereit zum Kopieren.
Für eine sechseckige Plakette oder einen schrägen Bildausschnitt sind Koordinaten im Quelltext schwer zu beurteilen. Der CSS-Clip-Path-Generator zeigt die Kante beim Ziehen eines Punktes sofort.
Der CSS-Clip-Path-Generator erzeugt auch circle(), ellipse() und inset() mit passenden Parametern. Sie sehen den Ausschnitt neben dem Code und exportieren nur ein Ergebnis, das zur aktuellen Form gehört.
Warum den CSS-Clip-Path-Generator verwenden?
Ausschnitt und Koordinaten bleiben beim Bearbeiten im Blick.
Polygonpunkte direkt verschieben
Ziehen Sie einen Eckpunkt oder stellen Sie X und Y exakt ein. So wird aus der Vorlage ein eigenes Polygon; clip-path Punkte bearbeiten ist ohne ständiges Probieren im Stylesheet möglich.
Prozent und Pixel vergleichen
Das Polygon bleibt bei einem Einheitenwechsel gleich. Pixel werden für ein 320 × 320 px großes Referenzfeld berechnet; ein Clip-Path-Maker sollte diese Größe offenlegen.
Von der Vorlage zum gültigen Ausschnitt
02
Punkte gezielt setzen
Eine Markierung auf der Kante fügt einen Mittelpunkt ein. Gewählte Punkte lassen sich numerisch ändern; Prozentwerte skalieren mit dem Element, Pixel mit dem 320-px-Bezugsfeld.
03
Aktuellen Code ausgeben
Die Automatik aktualisiert nach einer kurzen Pause. Schalten Sie sie aus, um per Taste oder Strg/Cmd + Eingabe zu erzeugen; veralteter Code kann nicht kopiert werden.
Werkzeuge für Grundformen
Vier CSS-Formen
Polygon, Kreis, Ellipse und Inset erhalten jeweils geeignete Regler für Punkte, Radius, Mittelpunkt oder Kantenabstand.
Punkte hinzufügen und entfernen
Klicken Sie eine Kante an, ziehen Sie einen Punkt oder geben Sie Koordinaten ein. Vor dem Löschen gibt es eine Vorschau; drei Punkte bleiben mindestens erhalten.
Vorlagen mit Rückgängig
Dreieck, Raute, Sechseck, Stern und Pfeil helfen beim Einstieg. Ein Wechsel überschreibt nicht unbemerkt Ihre Anpassungen.
CSS direkt exportieren
Als CSS-Form-Generator liefert das Werkzeug eine Standarddeklaration für clip-path zum Kopieren oder Herunterladen.
Grenzen von Einheiten und Clipping
- Pixel beziehen sich auf 320 px
- Ein Polygon in Pixeln passt nicht automatisch zu anders großen Elementen. Für responsive Formen Prozent verwenden; gemischte Einheiten innerhalb eines Polygons sind ausgeschlossen.
- Kein Import freier CSS-Werte
- Polygon clip-path erstellen ist möglich, aber vorhandene path(), shape(), SVG-url() oder calc()-Ausdrücke werden nicht eingelesen. Das Codefeld ist schreibgeschützt.
- Layout bleibt unverändert
- clip-path schneidet die Darstellung ab, nicht die belegte Fläche im Layout. Ein box-shadow des Elements kann ebenfalls verschwinden.
- Keine Bilddatei oder Animation
- Es gibt weder PNG- und SVG-Export noch Bild-Upload oder Hover-Animation. Für Polygon-Übergänge wären gleich viele Punkte in beiden Zuständen nötig.
Fragen zum CSS-Clip-Path-Generator
Wie füge ich einem Polygon einen Punkt hinzu?
Klicken Sie auf eine kleine Markierung zwischen zwei vorhandenen Punkten oder auf Punkt hinzufügen. Der neue Punkt liegt zunächst in der Mitte der gewählten Kante.
Warum bleibt die Größe des Elements trotz clip-path gleich?
Die CSS-Maske verändert nur das sichtbare Bild. Die ursprüngliche Layoutbox und ihr Platz im Dokument bleiben erhalten.
Weshalb wird der box-shadow beim Zuschneiden abgeschnitten?
Weil das Element mitsamt seinem eigenen Schatten beschnitten wird. Legen Sie den Schatten auf ein äußeres Element, wenn er sichtbar bleiben soll.
Kann ich zwischen zwei Polygonformen animieren?
CSS kann zwischen passenden Polygonen interpolieren, wenn beide dieselbe Punktzahl haben. Dieses Werkzeug gibt jedoch nur eine statische Form aus.
Bleibt eine Form mit Prozentkoordinaten responsiv?
Ja, Prozentpunkte beziehen sich auf die aktuelle Elementgröße. Die Pixel-Ausgabe dagegen ist an das angegebene 320 × 320 px Feld gebunden.
Ein Problem mit Form oder Koordinaten gefunden?
CSS-Clip-Path-Generator jetzt verwenden
Wählen Sie eine Form, ändern Sie ihre Punkte und übernehmen Sie die passende CSS-Deklaration.
Der CSS-Clip-Path-Generator bleibt für die nächste individuelle Bildkante oder geometrische Plakette bereit.
Verarbeitung im Browser.