CSS-Clip-Path-Generator

CSS-clip-path-Beschneidungspfadcode visuell generieren, unterstützt Formen wie Polygone, Kreise und Ellipsen und kann Bilder stapelweise verarbeiten

Fehler melden

Browser-Ausführungsmodus: Ihre Daten werden in Ihrem Browser verarbeitet und nicht auf den Server hochgeladen.

Geschwindigkeit und Stabilität: Die Verarbeitungsgeschwindigkeit hängt von Ihrem Gerät und Browser ab. Für große Stapelaufgaben kann die Desktop-Version stabiler sein.

Tool wird geladen, bitte warten...

Wenn das Online-Tool nicht lädt oder läuft, versuchen Sie das Desktop-Tool. https://tools.yikeaigc.com/

Tool-Nutzung

Zur alten Version zurückkehren

Erst Zuschneidepfad festlegen, dann Code kopieren oder Bilder stapelweise verarbeiten

Nach Auswahl einer Formvorlage können Polygon-Kontrollpunkte gezogen oder Kreis, Ellipse bzw. Inset-Rechteck gewählt und angepasst werden. Die Stapelverarbeitung nutzt den aktuellen Pfad. Bei mehreren Bildern werden nur die ersten 20 angezeigt, verarbeitet werden alle.

Aktuelle Pfadinfos

Typpolygon

Kontrollpunkte3

Tipp: Erst Pfad festlegen, dann Code kopieren oder Bilder verarbeiten.

Live-Vorschau Im Polygonmodus blaue Kontrollpunkte ziehen; Koordinaten erzeugen CSS synchron.

Koordinaten: relativ zum Element, oben links ist 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Form und Vorlagen Erst Typ wählen, dann Parameter anpassen

Formtyp

Vorgabekategorie

Pfadparameter Werte unterstützen Prozent

Koordinatentext

Radius

Mitte X

Mitte Y

Horizontaler Radius

Vertikaler Radius

Mitte X

Mitte Y

上

Rechts

unter

Zuo

Abgerundete Ecken

Vorschau & Ausgabe Hintergrund wirkt nur auf Vorschau und Bildexport

Vorschaubreite (px)

Vorschauhöhe (px)

Farbe A

Farbe B

Verlaufswinkel

Bildvorschau

Elementgrenzen anzeigen -webkit-Präfix einschließen Klassenselektor erzeugen

Code generieren

Code wird mit den Einstellungen live aktualisiert.

Aktuellen Pfad stapelweise anwenden Bitte zuerst im vorherigen Schritt den Pfad festlegen, dann Bilder auswählen.

Klicken oder Bilder hierher ziehen Unterstützt JPG, PNG, WebP, GIF, BMP und weitere gängige Formate

Noch keine Bilder ausgewählt.

Ausgabeeinstellungen PNG unterstützt transparenten Hintergrund

Ausgabeformat

Größenmodus

Max. lange Seite (px)

Eigene Breite (px)

Eigene Höhe (px)

Ausgabequalität92%

Außenbereich transparent Aktuellen Pfad verwenden

Wartet auf Verarbeitung.

Bildvorschau und Ergebnis Nach dem Upload werden die ersten 20 angezeigt; verarbeitet werden alle Dateien.

Zu verarbeitende Bilder0 Bilder

Bilder auswählen, um Miniaturen zu sehen.

Ergebnis0 Bilder

Nach der Verarbeitung werden Ergebnis-Miniaturen angezeigt.

Anleitung

Anleitung zur Nutzung der Software

Zuschnittspfad entwerfen: Wählen Sie nach dem Öffnen des Tools im Schritt „Pfad entwerfen“ zuerst den Formtyp aus. Verfügbar sind Polygon, Kreis, Ellipse oder eingebettetes Rechteck.
Vordefinierte Form auswählen: Wählen Sie eine Vorlage aus Grundformen, Pfeilen und Symbolen oder dekorativen Formen und passen Sie anschließend die Parameter nach Bedarf an.
Pfadparameter bearbeiten: Bei Polygonen können Sie Kontrollpunkte ziehen oder Prozentkoordinaten in die Koordinatenfelder eingeben; bei Kreis, Ellipse und eingebettetem Rechteck können Radius, Mittelpunkt, Abstände und abgerundete Ecken direkt eingetragen werden.
Vorschaueffekt einstellen: Passen Sie Breite und Höhe der Vorschau, Verlaufsfarben und Verlaufswinkel an oder wählen Sie ein Bild als Vorschauinhalt aus.
CSS-Code kopieren: Klicken Sie nach der Prüfung des Ergebnisses auf „clip-path kopieren“ oder „CSS kopieren“. Sie können wählen, ob das -webkit-Präfix und ein Klassenselektor enthalten sein sollen.
Bilder stapelweise verarbeiten: Klicken Sie auf „Weiter: Stapelverarbeitung“, wählen Sie mehrere Bilder aus, legen Sie Ausgabeformat, Qualität und Größenmodus fest und starten Sie die Verarbeitung.
Ergebnisse herunterladen: Klicken Sie nach Abschluss der Verarbeitung auf „Alle Ergebnisse als ZIP herunterladen“. Die Ausgabedateien übernehmen möglichst die ursprünglichen Dateinamen; bei Namenskonflikten werden automatisch Zahlen zur Unterscheidung hinzugefügt.

Häufige Fragen

Antwort: clip-path wird verwendet, um Elemente in eine bestimmte Form zuzuschneiden. Es wird häufig für ungewöhnliche Bilddarstellungen, Kartendesigns mit speziellen Kanten, Button-Formen, dekorative Webgrafiken und interaktive Effekte eingesetzt.

Antwort: polygon erzeugt ein Polygon aus mehreren Koordinatenpunkten; circle erzeugt einen kreisförmigen Zuschnittbereich; ellipse erzeugt einen elliptischen Zuschnittbereich; inset erzeugt ein eingebettetes Rechteck und unterstützt Parameter für abgerundete Ecken.

Antwort: Koordinaten werden in Prozent angegeben, zum Beispiel steht 50% 0% für die Mitte der oberen Kante des Elements und 100% 100% für die rechte untere Ecke. Die einzelnen Punkte werden durch Kommas getrennt, mindestens 3 Punkte sind erforderlich.

Antwort: -webkit-clip-path dient der Kompatibilität mit bestimmten WebKit-basierten Umgebungen. Um die Unterstützung zu verbessern, können sowohl die Schreibweise mit Präfix als auch die Standardschreibweise beibehalten werden.

Antwort: Als Eingabe können gängige Bildformate ausgewählt werden, die Ausgabe unterstützt PNG, JPEG und WebP. PNG eignet sich zum Beibehalten transparenter Bereiche, JPEG zum Erzeugen kleinerer Dateien und WebP für ein gutes Verhältnis von Dateigröße und Bildqualität.

Antwort: Das Tool versucht, den ursprünglichen Dateinamen möglichst beizubehalten, und ersetzt je nach Ausgabeformat die Dateierweiterung. Wenn Dateien mit gleichem Namen vorhanden sind, wird dem Dateinamen eine Zahl hinzugefügt, damit die Ergebnisse sich nicht gegenseitig überschreiben.