Entwickler / CSS-Formen

CSS-Clip-Path-Generator: Polygon, Kreis, Ellipse und Inset

Erstelle CSS-Ausschnitte mit sechs Polygonvorlagen, verschiebbaren und per Tastatur anpassbaren Punkten sowie Steuerelementen für Kreis, Ellipse und Inset. Zeige eine Verlaufsfläche oder ein lokales Bild an und kopiere CSS in Prozent oder Pixeln.

CSS-Clip-Path-Generator: Polygon, Kreis, Ellipse und Inset: Passt die Vorschau an die ausgewählte Form an, ohne die zugrunde liegende Bilddatei zu verändern. Die Ausgabe in Prozent richtet sich nach den Abmessungen des Elements. Bei der Pixelausgabe werden die Referenzbreite und -höhe verwendet; die angezeigte Vorschau wird an deinen Bildschirm angepasst. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Clip-Pfad-FormübersichtLokale Verarbeitung

Läuft vollständig in deinem Browser

Ziehe einen nummerierten Punkt, benutze seine Pfeiltasten oder gib Koordinaten ein. Die folgenden Koordinaten sind Prozentwerte; die Pixelausgabe verwendet die Referenzgröße.

Punkt 1
Punkt 2
Punkt 3
Punkt 4
Punkt 5
Punkt 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Prozentuale Formen werden mit dem Element skaliert. Kreis-Prozentwerte verwenden die normierte Diagonale; Ellipsen-Prozentwerte verwenden Breite und Höhe. Pixelkoordinaten sind an die Referenzabmessungen gebunden.

CSS-Beschneidung

MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Die Beschneidung ändert den sichtbaren Bereich, ohne den Layout-Rahmen des Elements zu verändern.

Koordinaten einfacher Formen

W3C CSS Shapes Level 1, einfache Formen: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Polygonkoordinaten und Ellipsenradien werden anhand des Referenzrahmens bestimmt; Kreisprozente verwenden dessen normalisierte Diagonale. Die vorgegebenen Koordinaten und der Verlauf sind originale Grafiken.

So benutzt du es

  1. Wähle eine Form und Vorlage aus und lege anschließend die Referenzabmessungen fest.
  2. Ziehe die Polygonpunkte, nutze die Pfeiltasten oder bearbeite die Koordinaten. Passe bei anderen Formen die Steuerelemente an.
  3. Wähle eine Ausgabe in Prozent oder Pixeln und kopiere das CSS.

Datenschutz & Einschränkungen

Optionale Bildvorschauen bleiben auf deinem Gerät. Es wird nichts hochgeladen.

Ähnliche Tools

CSS GridBoxschattenFlexbox

Häufige Fragen

Wie bearbeite ich einen Punkt, ohne ihn zu ziehen?

Setze den Fokus auf seinen nummerierten Griff und nutze die Pfeiltasten oder gib X- und Y-Prozentwerte in der Punktliste ein. Polygone benötigen mindestens drei Punkte.

Wird damit ein zugeschnittenes Bild exportiert?

Nein. Exportiert wird CSS für ein HTML-Element. Das lokale Bild dient nur als Vorschau.

Wie werden Kreisprozente gemessen?

CSS verwendet die normalisierte Diagonale, sqrt((width squared + height squared) / 2), als Referenz für den Kreisradius. Die Ellipsenradien verwenden Breite und Höhe getrennt.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig