Catégorie: Développement
Générateur de clip-path CSS
Choisissez une forme et copiez sa valeur clip-path
Choisissez une forme, du cercle ou de l'ellipse jusqu'à l'hexagone, la flèche ou la bulle de dialogue, ajustez son retrait par rapport aux bords, et copiez la valeur clip-path obtenue avec un aperçu en direct.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Écrire un polygone clip-path à la main demande de calculer la position en pourcentage de chaque point et d'imaginer comment ils se relient, ce qui est lent à ajuster dès que l'on dépasse un simple triangle. Cet outil fournit un jeu de formes courantes sous forme de listes de points toutes prêtes, plus un seul réglage de retrait qui rapproche chaque point du centre de la même façon quelle que soit la forme, afin que vous puissiez prévisualiser et copier un clip-path utilisable sans faire la géométrie vous-même.
Mode d'emploi
- Choisissez une forme.
- Ajustez le retrait pour l'agrandir ou la réduire dans sa boîte.
- Copiez la déclaration clip-path.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Pourquoi le cercle et l'ellipse se comportent-ils différemment des autres formes ?
- circle() et ellipse() prennent un rayon, donc le retrait y réduit directement le rayon, alors que les formes en polygone rapprochent chaque point du centre du même pourcentage.
- Le clip-path affecte-t-il la mise en page ou seulement ce qui est visible ?
- Seulement ce qui est visible. L'élément garde sa boîte d'origine pour la mise en page ; clip-path ne fait que masquer les parties hors de la forme, de la même façon qu'overflow: hidden masque le contenu hors d'une boîte.
- Quelque chose est-il envoyé à un serveur ?
- Non. Les points de la forme sont calculés dans la page à partir de la forme et du retrait choisis, d'où la mise à jour instantanée de l'aperçu.