Design · Lokal-Werkzeug
CSS Clip Path Generator
Bearbeite Polygonpunkte per Ziehen, Tastatur oder Koordinaten. Vier Vorlagen und lokaler Export als clip-path-Deklaration oder vollständiges CSS.
Aufgabenpfad / von der Eingabe zum Ergebnis
Startform wählen
Läuft lokal · Nichts wird hochgeladen
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;
}Vier Vorlagen und zwei Schieberegler sind verfügbar. Freie Vertex-Bearbeitung, SVG-Pfad-Importe und Kurven werden nicht unterstützt. Zum Kopieren oder Herunterladen einer angepassten Regel nutze CSS kopieren oder .css herunterladen im Arbeitsbereich.
Aufgabenpfad / von der Eingabe zum Ergebnis
Wähle Sechseck, Raute, Parallelogramm oder Chevron. Zwei Regler ändern die Vorlage; die Bearbeitung eines Punktes erzeugt ein eigenes Polygon.
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.
Prüfe alle Kanten vor dem Export. Nummerierte Griffe sind nur Bedienelemente und kein Teil des CSS.
CSS-Ausgabe: Nur clip-path-Deklaration / Vollständiges CSS-Beispiel. Das vollständige Beispiel enthält deine Farbe, 240px Breite und ein Seitenverhältnis von 4:3. Der Editor passt sich dem Bildschirm an.
Prozentkoordinaten skalieren mit dem Element. Füge die Deklaration in eine Regel ein oder nutze .clipped-shape. Prüfe Desktop- und Mobilansicht.
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.
Starte mit vier Vorlagen und füge Polygonpunkte hinzu, lösche oder verschiebe sie. Exportiere eine clip-path-Deklaration oder ein 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.
Häufige Fragen