CSS Clip-path Builder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Preview (drag points, click to add, right-click to remove)
3 points
Click on the canvas to add points.
Drag handles to move.
Right-click a handle to remove.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Clip-path Builder

Baut CSS-clip-path-Formen – polygon, circle, ellipse und inset – visuell auf und gibt die Eigenschaft zum Einfügen aus.

How it works

clip-path legt einen Bereich fest, und alles außerhalb wird nicht gezeichnet. `polygon()` nimmt eine Liste von `x% y%`-Punkten, gemessen von der linken oberen Ecke der Box des Elements, `polygon(50% 0, 100% 100%, 0 100%)` ist also ein Dreieck; `circle()` und `ellipse()` nehmen Radien plus eine Position hinter `at`; `inset()` nimmt Einrückungen oben, rechts, unten und links mit optionalem Radius hinter `round`. Prozentwerte beziehen sich je Achse getrennt auf die Box des Elements, die Form dehnt sich also mit dem Element, statt ihre Proportionen zu halten.

When to use it

  • Eine diagonale oder schräge Kante an einem Abschnittstrenner schneiden, ohne ein Bild zu exportieren
  • Ein Bild oder ein Video in reinem CSS in einen nicht rechteckigen Rahmen maskieren
  • Einen Pfeil, ein Chevron, ein Abzeichen oder eine Banderole bauen, die sonst ein Hintergrundbild bräuchten
  • Eine Enthüllungsanimation erzeugen, indem zwischen zwei Polygonen übergeblendet wird

Watch out for

  • Das Beschneiden ändert das Layout nicht. Das Element belegt weiterhin seine volle Box, Nachbarelemente rücken also nicht in den weggeschnittenen Raum – ergänzen Sie negative Außenabstände oder passen Sie die Abstände selbst an.
  • Prozentwerte gelten je Achse, eine Form verzerrt sich also, wenn das Element seine Größe ändert. Eine Diagonale von 45° bei einer Breite ist bei einer anderen keine 45° mehr; nutzen Sie Pixel- oder Viewport-Einheiten, wenn der Winkel halten muss.
  • Übergänge zwischen Polygonen werden nur interpoliert, wenn beide dieselbe Anzahl Punkte in derselben Reihenfolge haben. Füllen Sie die kürzere Form mit wiederholten Punkten auf, statt zu erwarten, dass der Browser sie einander zuordnet.
  • Ein clip-path beschneidet alles, was das Element zeichnet, einschließlich box-shadow, outline und Fokusring. Eine beschnittene Schaltfläche kann ihre sichtbare Fokusanzeige vollständig verlieren, was ein Rückschritt bei der Barrierefreiheit ist.

Frequently Asked Questions

Welche Formen kann clip-path erzeugen?

Vier Formfunktionen: polygon() für beliebige n-eckige Formen (die Kontrollpunkte lassen sich ziehen), circle() für exakte Kreise mit Mittelpunkt und Radius, ellipse() für Ovale und inset() für rechteckige Beschnitte mit optional abgerundeten Ecken über border-radius.

Wie erzeuge ich mit clip-path einen diagonalen Abschnittstrenner?

Nutzen Sie polygon() am Container des Abschnitts: polygon(0 0, 100% 0, 100% 90%, 0 100%). Das beschneidet die untere rechte Ecke diagonal und erzeugt eine schräge Unterkante. Über die Prozentwerte ändern Sie Winkel und Richtung der Diagonale.

Beeinflusst clip-path den Layoutfluss?

Nein – clip-path wirkt nur auf die sichtbare Darstellung. Das Element belegt im Layout weiterhin seine vollen ursprünglichen Maße, was zu unsichtbaren Klickflächen oder Lücken führen kann. Ergänzen Sie am Elternelement overflow: hidden, wenn die Abstände falsch wirken.

How to Use CSS Clip-path Builder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.