clip-path CSS
Gratuit, sans inscription, fonctionne dans votre navigateur.
Plutôt que de dessiner la forme, servez-vous-en pour découper autre chose. Un `clipPath` dans le document plus une propriété CSS transforment une image, une vidéo ou un div coloré en cette forme — c'est ainsi qu'un blob devient un masque d'avatar plutôt qu'un arrière-plan.
Un export clip-path CSS, réduit aux premières lignes
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
</clipPath>
</defs>
</svg>
/* The element must be 200×200 for the clip to line up. */
.clipped {
width: 200px;
height: 200px;
clip-path: url(#shape-clip);
}Ce qu'il faut savoir
- L'élément conserve son contenu : ceci recadre une photographie au lieu de se placer derrière elle.
- Nécessite à la fois le bloc `<svg>` en ligne et la règle CSS — la propriété référence le clipPath par son id.
- L'élément doit correspondre à l'espace de coordonnées du découpage, c'est pourquoi la sortie indique la taille.
- Changez l'id si vous utilisez plus d'un découpage sur la même page.
Compatibilité des navigateurs
Pris en charge dans tous les navigateurs actuels. `clip-path: url(#id)` référençant un clipPath en ligne est la forme la plus large — davantage que les syntaxes de fonction `path()` et `shape()`, plus récentes et dont le risque n'en vaut pas la peine quand celle-ci ne coûte rien de plus.
Taille sur l'ensemble des préréglages
Tous les préréglages que ce format peut exprimer, mesurés tels que le générateur les émet. Le plus léger est Hexagone à 369 octets ; le plus lourd est Éclaboussure à 859 octets. C'est le nombre de points qui fait la différence — chaque point supplémentaire ajoute un segment cubique entier de coordonnées.
| Format | Taille |
|---|---|
| Hexagone | 369 B |
| Cristal | 374 B |
| Gemme facettée | 400 B |
| Pics de montagne | 423 B |
| Triangle arrondi | 435 B |
| Balayage | 438 B |
| Zigzag net | 456 B |
| Vague profonde | 474 B |
| Bord de nuage | 487 B |
| Vague de pied de page | 510 B |
| Arches découpées | 511 B |
| Galet | 512 B |
| Vague douce | 514 B |
| Vagues superposées | 544 B |
| Blob doux | 548 B |
| Marches | 550 B |
| Festons | 574 B |
| Blob organique | 620 B |
| Étincelle | 626 B |
| Vague organique | 670 B |
| Étoile | 769 B |
| Bord pixelisé | 771 B |
| Fleur | 775 B |
| Bulle | 777 B |
| Ondulation | 847 B |
| Éclaboussure | 859 B |
Plus en détail
La sortie utilise `clipPathUnits="userSpaceOnUse"` et vous indique la taille à donner à l'élément, plutôt que la forme `objectBoundingBox` qui s'adapterait automatiquement à n'importe quel élément. Cela semble le moins bon choix jusqu'à l'essai : `objectBoundingBox` exige que chaque coordonnée soit exprimée entre 0 et 1, ce qui suppose de réémettre le tracé à une autre échelle et de perdre l'essentiel de sa précision à l'arrondi. Être explicite sur la taille garde la courbe exactement telle qu'elle a été dessinée.
Questions
Quelles formes fonctionnent en clip-path CSS ?
Ce format couvre Vague, Blob. C'est une contrainte réelle et non une limite de cet outil : lorsqu'un générateur manque à cette liste, le format est véritablement incapable de l'exprimer, et le proposer quand même vous remettrait quelque chose qui dessine silencieusement la mauvaise forme.
Quelle taille fait un export clip-path CSS ?
Entre 369 et 859 octets sur les 26 préréglages qui le prennent en charge. Moins de points est le levier qui compte ; la douceur et la couleur ne coûtent rien.
Puis-je le modifier à la main ensuite ?
Oui. La sortie est du texte brut sans commentaire de générateur, sans balisage identifiant et sans lien de retour vers ce site. Changez les couleurs, renommez la classe, ou collez le tracé dans votre propre SVG — rien en aval ne dépend de son état d'origine.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.