Geometric Shape Presets
Polygon Vertices (3)
Point 1
X Axis50%
Y Axis0%
Point 2
X Axis0%
Y Axis100%
Point 3
X Axis100%
Y Axis100%
Canvas Preview Options
Show Vertex Points & Outlines
Real-Time Clipped Canvas
Clipped Visual
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Anleitung zur Maskenerstellung
- 1Wählen Sie eine Vorlage (Dreieck, Sechseck, Stern, Pfeil) oder starten Sie bei Null.
- 2Verschieben Sie die Knotenpunkte auf der Leinwand, um die Silhouette anzupassen.
- 3Kopieren Sie die fertige CSS-Regel `clip-path: polygon(...)`.
GPU-beschleunigte Zuschnittmasken
CSS `clip-path` wird direkt von der Grafikkarte gerendert und ist wesentlich performanter als herkömmliche Bildmasken.
Architecture & Privacy
- Full WebKit Vendor Prefixes: Includes standard clip-path and -webkit-clip-path for complete iOS Safari support.
- Polygon percentage coordinates: Scales responsively with any aspect ratio container.
- SVG Vector Wireframe Overlay: Shows numbered anchor points and connect lines in real time.
- Zero runtime library overhead: Pure client-side calculations rendered directly through the CSS engine.
Häufig gestellte Fragen (FAQ)
Verwandte Entwickler-Tools
Popular
CSS-Glassmorphismus-Generator (Milchglas-Effekt)
Milchglas-Karten mit Unschärfe, Transparenz und Safari-Präfixen erstellen
Launch tool→
Popular
CSS-Box-Shadow-Generator (Mehrstufige Weiche Schatten)
Realistische, mehrschichtige Box-Shadows mit weichem Auslauf und Inset-Tiefe gestalten
Launch tool→
Trending
CSS-Farbverlaufs-Generator (Linear & Radial)
Farbverläufe interaktiv zusammenstellen und als performanten CSS-Code exportieren
Launch tool→
CSS-Border-Radius-Generator (Organische 8-Punkte-Formen)
Organische Blobs und asymmetrische Rundungen mit der 8-Werte-Syntax erzeugen
Launch tool→