CSS Clip Path Generator
24 Schnittformen, Formparameter und editierbare Polygonpunkte; CSS oder einzelne Deklaration exportieren.
Lokale Verarbeitung
Vergleiche vier Polygonformen und übernimm die Einstellungen im Arbeitsbereich. Jede Vorschau nutzt dasselbe Polygon wie ihr CSS; die exportierte Startbox ist 240 × 180 px.
Diese Einstellungen im Arbeitsbereich anpassenNutze ein Sechseck für ein Team-Avatar oder ein wiederkehrendes Abzeichen.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Probiere eine schräge Raute für ein kleines Bild oder einen dekorativen Akzent.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Nutze eine schräge Vier-Punkt-Form als Kartenakzent.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Richte eine Bannerkante auf den nächsten Abschnitt.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Beginne mit dem CSS einer der obigen Formen und füge danach diese Regeln hinzu. Ersetze Bildpfad und Alt-Text durch deine eigenen. Die Box behält ein 4:3-Verhältnis; object-fit: cover schneidet das Bild füllend zu, ohne es zu verzerren. Prozentkoordinaten folgen der Box bei Größenänderungen.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Beschreibe dein Bild"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Diese Galerie zeigt 4 grundlegende Polygonbeispiele. Der Arbeitsbereich bietet 24 Formen; bei Polygonen kannst du Punkte hinzufügen, löschen und verschieben, während Kreis, Ellipse und Inset-Formen Parameter verwenden. SVG-Pfadimport und das Bearbeiten eigener Kurven sind nicht enthalten. Speichere die Regel über CSS kopieren oder .css herunterladen im Arbeitsbereich. Lokale PNG/JPEG/WebP-Bilder bleiben zur Vorschau in diesem Tab und werden weder hochgeladen noch gespeichert. Das Vorschauverhältnis ändert nur den Zuschnitt; Bild und Vorschauverhältnis fehlen im CSS/HTML-Export.
Aufgabenpfad / von der Eingabe zum Ergebnis
Wähle aus 24 Formen. Bei Polygonen kannst du Punkte hinzufügen, löschen und verschieben; Kreis, Ellipse und Inset-Formen verwenden Parameter. Exportiere eine clip-path-Deklaration oder ein vollständiges CSS-Beispiel.
Ziehe einen nummerierten Punkt oder gib Koordinaten ein. Pfeiltasten verschieben den fokussierten Punkt um 1 %, Umschalt + Pfeil um 10 %. Hinzufügen fügt einen Mittelpunkt nach dem gewählten Punkt ein.
Das vollständige Beispiel enthält deine Farbe, 240px Breite und ein Seitenverhältnis von 4:3. Der Editor passt sich dem Bildschirm an.
Wähle ein lokales PNG-, JPEG- oder WebP-Bild mit höchstens 8 MiB, 16 Megapixeln und 8192 Pixeln je Seite. Du kannst alle 24 Formen ausprobieren. Das Bild füllt den Rahmen mit cover-Zuschnitt; 4:3, 1:1, 16:9 und 3:4 ändern nur diese Vorschau. Das Bild wird weder hochgeladen noch gespeichert und ist nicht im CSS/HTML-Export enthalten. Das vollständige CSS-Beispiel behält 4:3. Kopiere oder lade das CSS vor dem Verlassen herunter.
CSS-Ausgabe: Nur clip-path-Deklaration / Vollständiges CSS-Beispiel.
Prozentkoordinaten skalieren mit dem Element. Füge die Deklaration in eine Regel ein oder nutze .clipped-shape. Prüfe Desktop- und Mobilansicht. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.
CSS-clip-path-Generator nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.
Läuft im aktuellen Browser-Tab.
Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.
Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.
Leere den Tab, und die aktiven Arbeitsdaten sind weg.
Im lokalen Browsertest vom 2026-09-24 startest du mit dem Standard-Sechseck (horizontal 24 %, vertikal 50 %). Wähle Punkt 1, ändere X von 24 % auf 30 % und setze die Farbe auf #ff6600. Die Vorschau zeigt ein orangefarbenes Polygon mit sechs Punkten und clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); die übrigen fünf Punkte bleiben in ihrer Reihenfolge.
Vollständiges Beispiel-CSS nutzt .clipped-shape mit Breite 240px, Seitenverhältnis 4 / 3, Hintergrund #ff6600 sowie -webkit-clip-path und clip-path. CSS kopieren entsprach der heruntergeladenen toolars-clip-path.css (240 Byte). Im Modus nur clip-path-Deklaration ergab das Kopieren genau clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 UTF-8-Byte). Prüfe den Zuschnitt im eigenen Layout.
Setze X von Punkt 1 auf 101 %. Am 2026-09-24 meldete der Arbeitsbereich, dass Punkte endlich und zwischen 0 und 100 % liegen müssen; Vorschau und CSS verschwanden, Kopieren und Download waren deaktiviert. X = 30 % stellt polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%) wieder her. Sich kreuzende Kanten werden nicht automatisch korrigiert.
Wähle aus 24 Formen.
Häufige Fragen