Générez des formes polygonales CSS clip-path avec poignées interactives. Copiez le code CSS multi-navigateurs, les masques SVG et les coordonnées réactives en pourcentages.
-webkit-clip-path: polygon(
0.0% 0.0%,
100.0% 0.0%,
100.0% 85.0%,
0.0% 100.0%
);
clip-path: polygon(
0.0% 0.0%,
100.0% 0.0%,
100.0% 85.0%,
0.0% 100.0%
);Générez des formes polygonales personnalisées avec CSS clip-path et poignées interactives. Exportez les règles CSS multi-navigateurs, le SVG et les coordonnées réactives en pourcentage.
Notation fonctionnelle officielle du module W3C CSS Shapes Module Level 1. Accepte une règle de remplissage facultative ('nonzero' ou 'evenodd') suivie de paires de coordonnées séparées par des virgules. Chaque sommet est constitué de deux valeurs d'espacement ou de pourcentage (X Y) séparées par une espace.
Détermine le mode d'évaluation des tracés polygonaux sécants et des évidements intérieurs imbriqués. La valeur 'nonzero' remplit l'intégralité des boucles vectorielles closes ; 'evenodd' alterne l'état de remplissage à chaque franchissement de rayon, autorisant les découpes toriques (donuts) et les cadres ajourés.
Définit le rectangle englobant servant d'ancrage aux calculs de pourcentages. Les valeurs admises incluent 'border-box' (bordures incluses), 'padding-box' (bordures exclues), 'content-box', ou les repères SVG 'fill-box', 'stroke-box' et 'view-box'. Vaut 'border-box' par défaut sur les éléments HTML.
Spécifique aux définitions SVG <clipPath>. La valeur 'objectBoundingBox' normalise les coordonnées sous forme de fractions relatives entre 0.0 et 1.0 par rapport à la boîte englobante de l'élément cible ; 'userSpaceOnUse' verrouille les coordonnées sur le repère absolu du canevas SVG.
Indique au moteur de rendu du navigateur d'isoler l'élément découpé sur sa propre couche de composition GPU avant le lancement de l'animation, éliminant les cycles de repeinture CPU (paint) et garantissant une fluidité constante de 60 à 120 FPS lors des métamorphoses keyframes.
Les transitions CSS et animations @keyframes sur clip-path n'interpolent de manière fluide que si l'état initial et l'état final du polygone possèdent strictement le même nombre de sommets, déclarés dans le même ordre séquentiel. Si un triangle à 3 points mute vers un octogone à 8 sommets, le moteur de rendu échoue à interpoler la géométrie et bascule brutalement à mi-parcours (50 %). Solution : insérez des points factices colinéaires le long des arêtes du triangle afin que les deux formes déclarent rigoureusement 8 sommets.
Pour concevoir une fenêtre évidée, un anneau en donut ou un cadre photo ajouré au sein d'un polygone CSS unique, déclarez 'polygon(evenodd, ...)'. Parcourez le contour extérieur dans le sens des aiguilles d'une montre (de 0% 0% à 100% 100%), réalisez une arête de jonction vers l'intérieur, puis tracez la fenêtre interne dans le sens anti-horaire. L'algorithme de lancer de rayons 'evenodd' soustrait automatiquement cet îlot intérieur, produisant un centre transparent.
Contrairement à 'opacity: 0' ou 'border-radius' qui continuent d'intercepter les clics dans les angles rectangulaires transparents, 'clip-path' restreint rigoureusement les événements de pointage (clic, survol, toucher tactile) à la surface interne visible du polygone. Les clics effectués en dehors du périmètre découpé traversent instantanément vers les éléments DOM sous-jacents, sans qu'il soit nécessaire d'ajouter 'pointer-events: none'.
Lors de la juxtaposition de conteneurs découpés adjacents (par exemple des bannières hero scindées en diagonale), l'anti-crénelage lors de la rastérisation GPU peut laisser transparaître un fin liséré parasite de 1 pixel à la jointure. Neutralisez ce scintillement en appliquant un chevauchement microscopique de 0,2 % sur les coordonnées de l'arête commune, ou en ajoutant 'outline: 1px solid transparent' pour forcer un lissage matériel des contours.
Vérifiez le nombre de sommets dans vos étapes d'animation CSS (@keyframes ou transition). L'interpolation géométrique polygonale exige impérativement un nombre identique de paires de coordonnées. Utilisez l'option d'équilibrage des sommets du générateur pour injecter des points d'ancrage colinéaires dans la forme la plus simple afin d'égaliser le nombre de sommets entre les deux états.
La propriété 'clip-path' découpe tout rendu descendant ainsi que les ombres 'box-shadow' qui débordent de son périmètre, tout en créant un nouveau contexte d'empilement (stacking context). Déportez l'ombre portée sur un conteneur parent avec 'filter: drop-shadow(...)', et téléportez vos menus flottants ou info-bulles (tooltips) via un portail React (React Portal) directement rattaché à document.body.
Le moteur WebKit exige le préfixe constructeur sur les moutures historiques d'iOS et macOS (Safari 13 et versions antérieures). Déclarez systématiquement la règle préfixée '-webkit-clip-path: polygon(...)' immédiatement avant la propriété standard non préfixée 'clip-path' au sein de votre feuille de style CSS.
Lorsque les segments d'un polygone se chevauchent, la règle de remplissage par défaut évalue les indices d'enroulement, ce qui peut inverser la visibilité des zones intérieures. Démêlez les poignées de sommets sécantes directement sur le canevas interactif, ou configurez le paramètre fill-rule sur 'nonzero' pour forcer le remplissage de tous les contours vectoriels superposés.
Un polygone CSS se configure avec la syntaxe 'clip-path: polygon(x1 y1, x2 y2, ...)', où chaque sommet est défini par une coordonnée horizontale (X) et verticale (Y) séparées par une espace, les paires étant délimitées par des virgules. Les coordonnées s'expriment le plus souvent en pourcentages par rapport au rectangle englobant de l'élément (de 0% 0% dans le coin supérieur gauche à 100% 100% dans le coin inférieur droit). Les moteurs de rendu modernes prennent en charge nativement les pourcentages et les pixels sous accélération matérielle GPU.
Oui, les polygones CSS sont pleinement animables via les règles standard 'transition: clip-path 0.4s ease' ou des animations '@keyframes', à l'unique condition que l'état initial et l'état final contiennent rigoureusement le même nombre de sommets. Si le décompte de sommets diffère, le navigateur ne peut pas interpoler les coordonnées et saute brutalement d'une forme à l'autre. Il est possible de métamorphoser n'importe quelle géométrie en complétant la forme la plus simple avec des points factices colinéaires pour égaliser le décompte.
La fonction CSS 'clip-path: polygon()' est ultra-légère, définie directement en CSS sans balisage HTML additionnel et gère nativement le responsive en pourcentages, mais elle se limite aux segments rectilignes. À l'inverse, l'élément SVG '<clipPath>' prend en charge les courbes de Bézier cubiques et quadratiques (<path>), les primitives circulaires ou elliptiques et le masquage textuel, mais nécessite une déclaration d'élément dans le DOM référencée via 'clip-path: url(#id)'. Pour les formes géométriques à arêtes droites, le polygone CSS offre une exécution nettement plus véloce avec une charge DOM nulle.
Selon les spécifications du W3C, la propriété 'clip-path' restreint la zone de détection des interactions (hit-testing) exactement au même titre que le rendu visuel. Les régions situées hors du périmètre polygonal n'interceptent aucun clic, survol ou événement de pointeur, laissant les éléments DOM sous-jacents parfaitement cliquables. Si un blocage persiste, vérifiez qu'aucun conteneur parent non découpé n'intercepte les événements, ou qu'un pseudo-élément non masqué (::before / ::after) ne se superpose pas à la zone.
Extrayez instantanément les palettes de couleurs de vos images. Générez des nuanciers dominants en HEX, RGB et HSL, exportez vos tokens CSS ou Tailwind et testez le contraste d'accessibilité WCAG.
Calculez instantanément les dimensions du nombre d'or et les proportions du rectangle d'or. Divisez les longueurs par phi (1,618), adaptez la typographie et générez des grilles réactives.
Générez des ombres portées CSS en neumorphisme et soft UI avec surfaces extrudées, en creux, plates ou concaves. Copiez instantanément du code CSS, Tailwind, SCSS ou SVG.
Générez instantanément des harmonies de couleurs équilibrées. Créez des palettes complémentaires, analogues ou triadiques avec audit de contraste WCAG et export CSS.
Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, opacité, bordure et ombres. Copiez instantanément du code HTML et CSS propre.
Compressez vos images en ligne sans perte de qualité. Réduisez la taille des fichiers JPG, PNG et WebP dans le navigateur sans téléversement, avec solveur de Ko cible et export ZIP groupé.