CSS-Hintergrundpfad-Generator
Führung
CSS-Hintergrundpfad-Generator
Erstellen Sie visuell CSS-clip-path-Formen mit einem intuitiven Drag-and-Drop-Editor. Erstellen Sie Polygone, Kreise, Ellipsen und Innenbereichsformen und kopieren Sie dann das generierte CSS direkt in Ihre Stylesheets.
Anwendung
Wählen Sie einen Formtyp oder starten Sie mit einer vordefinierten Vorlage. Ziehen Sie Steuerpunkte, um die Form visuell auf der Vorschau-Leinwand anzupassen. Der CSS-clip-path-Code wird während der Bearbeitung in Echtzeit aktualisiert. Wenn Sie mit dem Ergebnis zufrieden sind, kopieren Sie den generierten CSS-Code oder exportieren Sie ihn als SVG.
Merkmale
- Visueller Drag-and-Drop-Editor – Formen durch Bewegen von Steuerpunkten direkt auf der Leinwand erstellen
- Mehrere Formtypen – Polygon, Kreis, Ellipse und Innenbereich
- Vordefinierte Vorlagen – Starten Sie mit gängigen Formen wie Dreiecken, Sternen, Pfeilen und mehr
- Rückgängig und Wiederherstellen – Vollständige Verlaufsunterstützung für nicht-destruktive Bearbeitung
- Am Raster ausrichten – Präzise Punktplatzierung mit konfigurierbarer Rasterausrichtung
- SVG-Export – Laden Sie Ihre Form als SVG-Datei herunter
- Live-CSS-Ausgabe – Kopieren Sie die generierte clip-path-Eigenschaft sofort
Häufig gestellte Fragen
-
Was ist ein CSS-Clip-Pfad und wie funktioniert er?
CSS clip-path definiert einen Zuschneidebereich, der bestimmt, welche Teile eines Elements sichtbar sind. Alles außerhalb der clip-path-Form ist verborgen. Es unterstützt einfache Formen (Kreis, Ellipse, Innenbereich, Polygon) und SVG-Pfaddefinitionen. Im Gegensatz zu overflow:hidden, das nur auf rechteckige Grenzen zugeschnitten wird, kann clip-path komplexe nicht-rechteckige sichtbare Bereiche für kreative Layouts und visuelle Effekte erstellen.
-
Was ist der Unterschied zwischen clip-path und mask in CSS?
Clip-path erzeugt eine harte Kante – Pixel sind entweder vollständig sichtbar oder vollständig verborgen, je nachdem, ob sie innerhalb der definierten Form liegen. CSS-Masken verwenden ein Bild oder einen Verlauf, um die Transparenz zu steuern, was weiche Kanten und teilweise Transparenz ermöglicht. Clip-path ist einfacher und performanter für geometrische Formen, während Masken mehr künstlerische Kontrolle mit Verläufen und Alphakanälen bieten.
-
Wie funktionieren CSS-Polygonkoordinaten?
Polygonkoordinaten in clip-path verwenden Prozent- oder Längenwerte relativ zur Bounding Box des Elements. Jeder Punkt wird als x,y-Paar definiert, wobei 0% 0% die obere linke Ecke und 100% 100% die untere rechte Ecke ist. Die Punkte werden in Reihenfolge verbunden, um die Form zu bilden. Zum Beispiel erstellt polygon(50% 0%, 100% 100%, 0% 100%) ein Dreieck. Die Form schließt sich automatisch, indem der letzte Punkt mit dem ersten verbunden wird.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug wurde am 19. März 2026 hinzugefügt
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
