Tokenlabor

Clip-Path-Generator

Der Clip-Path-Generator erzeugt CSS Formen per clip-path: Polygon-Punkte ziehen, Vorlagen wie Dreieck, Sechseck und Stern nutzen oder circle(), ellipse() und inset() einstellen.

Punkte mit der Maus oder dem Finger ziehen. Mit der Tastatur: Punkt anwählen und mit den Pfeiltasten verschieben, mit Umschalt in Zehnerschritten.

CSS-Code

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS Formen mit clip-path

Der Clip-Path-Generator schneidet Elemente in Form: Alles außerhalb der Form wird unsichtbar, ohne dass Sie Bilder bearbeiten müssen. Für clip-path polygon setzen Sie beliebig viele Punkte in Prozent der Breite und Höhe, die Sie in der Vorschau direkt ziehen. Vorlagen liefern gängige CSS Formen wie Dreieck, Trapez, Raute, Sechseck, Stern, Pfeil und Sprechblase als Ausgangspunkt.

Neben polygon() kennt clip-path die Grundformen circle() mit Radius und Mittelpunkt, ellipse() mit zwei Radien und inset() für ein eingerücktes Rechteck, optional mit abgerundeten Ecken über round. Ein Dreieck CSS-seitig zu bauen war früher nur mit Rahmentricks möglich; mit clip-path: polygon(50% 0%, 100% 100%, 0% 100%) genügt eine Zeile, und der Inhalt, etwa ein Bild, wird mit beschnitten.

clip-path lässt sich animieren, wenn Start- und Zielform dieselbe Funktion mit derselben Zahl an Punkten verwenden. Grenzen: Der weggeschnittene Bereich reagiert nicht auf Klicks, Rahmen und Schatten des Elements werden mit abgeschnitten; für einen Schatten legen Sie filter: drop-shadow() auf ein umgebendes Element, zum Beispiel mit dem CSS-Filter-Generator.

Anleitung: Clip-Path-Generator in 4 Schritten

  1. Unter „Form“ eine Vorlage wie Dreieck, Sechseck, Stern oder Sprechblase wählen oder circle(), ellipse() oder inset().
  2. Bei Polygonen die Punkte in der Vorschau ziehen und mit „Punkt hinzufügen“ oder „Letzten Punkt entfernen“ anpassen.
  3. Bei Grundformen Radius, Radius x und y oder die Abstände oben, rechts, unten und links sowie den Eckenradius einstellen.
  4. Den „CSS-Code“ kopieren und in das Stylesheet übernehmen.

Typische Anwendungsfälle

  • Bilder in Form bringen: Fotos als Sechseck, Kreis oder schräges Banner zuschneiden, ohne sie in einem Bildprogramm zu bearbeiten.
  • Abschnittsübergänge: Schräge Kanten zwischen Seitenbereichen mit einem Polygon erzeugen.
  • Icons und Pfeile: Einfache CSS Formen wie Dreieck, Pfeil oder Chevron ohne SVG bauen.
  • Hover-Effekte: Zwei Formen mit gleicher Punktzahl erzeugen und per transition ineinander übergehen lassen.
Fragen

Häufige Fragen

Wie erstelle ich ein Dreieck mit CSS?

Am einfachsten mit clip-path: polygon(50% 0%, 100% 100%, 0% 100%) auf einem Element mit Breite, Höhe und Hintergrundfarbe. Die drei Punktpaare sind die Ecken in Prozent von Breite und Höhe.

Welche Einheiten kann ich in polygon() verwenden?

Prozent, Pixel, rem und andere Längen, auch gemischt und mit calc(). Prozent hat den Vorteil, dass die Form mit dem Element mitwächst.

Kann ich clip-path animieren?

Ja, mit transition oder @keyframes, sofern Start und Ziel dieselbe Formfunktion und bei polygon() dieselbe Anzahl an Punkten haben. Dann interpoliert der Browser die Punkte.

Warum sehe ich keinen Schatten an der Form?

clip-path schneidet auch box-shadow ab. Legen Sie das Element in einen Container und geben Sie diesem filter: drop-shadow(), dann folgt der Schatten der Form.

Unterstützen alle Browser clip-path?

Die Grundformen polygon(), circle(), ellipse() und inset() werden von allen aktuellen Browsern ohne Präfix unterstützt. Für sehr alte Safari-Versionen war -webkit-clip-path nötig.

Wie schneide ich ein Bild mit CSS rund zu?

Mit clip-path: circle(50%) oder einfacher mit border-radius: 50% bei quadratischem Bild. Für ein ovales Bild nutzen Sie ellipse() oder border-radius bei rechteckigem Format.

Was ist der Unterschied zwischen clip-path und mask?

clip-path schneidet mit einer geometrischen Form hart ab. mask nutzt ein Bild oder einen Verlauf als Maske, damit sind auch weiche Übergänge und Teiltransparenz möglich.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen