Tools · CSS · Clip-Path-Generator
Clip-Path-Generator
Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Wähle einen Formtyp (Polygon, Kreis, Ellipse oder Inset), oder eine Polygon-Vorlage.
Ziehe die Punkte in der Vorschau, oder nutze die Regler, um die Form zu verfeinern.
Kopiere das erzeugte clip-path-CSS.
Häufige Fragen
Nein. Die Form wird vollständig in deinem Browser erzeugt und angezeigt - das ist nur Mathematik und CSS-Text.
Ja. Öffne Punktkoordinaten und nutze Punkt hinzufügen - es teilt die längste Kante - oder die Entfernen-Schaltfläche einer Zeile. Ein Polygon behält mindestens drei Punkte.
Manche Kombinationen - wie ein Inset, das die ganze Box abdeckt - sind gültiges CSS, das alles wegschneidet. Kein Fehler, nur ein entarteter, aber legaler Wert.
Ja. Mit Tab zu einem Punkt springen und mit den Pfeiltasten bewegen - Shift für einen größeren Schritt.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
Anleitung lesenHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
Anleitung lesenMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
Anleitung lesen
Kommentare