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%);
Comment concevoir des masques polygonaux
- 1Choisissez un modèle de départ (Triangle, Hexagone, Étoile, Flèche) ou partez de zéro.
- 2Faites glisser les sommets sur le plan de travail pour ajuster la silhouette.
- 3Copiez la règle CSS `clip-path: polygon(...)` générée.
Découpage Accéléré par GPU
La propriété CSS `clip-path` est calculée directement par le processeur graphique, offrant d'excellentes performances par rapport aux masques d'image.
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.
Foire Aux Questions (FAQ)
Outils Similaires
Popular
Générateur de Glassmorphisme CSS (Effet Verre Dépoli)
Concevez des cartes en verre translucide avec flou d'arrière-plan en temps réel
Launch tool→
Popular
Générateur d'Ombres CSS Multicouches (box-shadow)
Créez des ombres portées réalistes, diffuses et élégantes avec profondeur inset
Launch tool→
Trending
Générateur de Dégradés CSS (Linéaire & Radial)
Composez des dégradés linéaires, radiaux et coniques avec export CSS instantané
Launch tool→
Générateur de Rayon de Bordure CSS Organique (8 Valeurs)
Créez des formes organiques et asymétriques grâce à la syntaxe avancée à 8 valeurs
Launch tool→