Générer un clip-path CSS pour masquer un élément

Le générateur fournit un extrait CSS contenant une déclaration clip-path pour masquer un élément. Choisissez la forme voulue, renseignez la taille et la position pour un cercle ou une ellipse, puis copiez la déclaration produite dans votre CSS.

Comprendre le rôle de l’outil

Ce générateur prépare une déclaration CSS clip-path destinée à masquer une partie visible d’un élément. Il peut servir pour une image, une vignette ou un bloc dont vous souhaitez modifier le contour sans réécrire manuellement la déclaration. Le principe consiste à sélectionner une forme nommée, à renseigner les paramètres disponibles, puis à reprendre l’extrait CSS obtenu dans la règle de l’élément concerné.

Les formes proposées ne répondent pas toutes aux mêmes réglages. Les cercles et les ellipses utilisent la taille et la position fournies, tandis que le triangle, l’hexagone, le pentagone, l’étoile et le losange reposent sur leur modèle polygonal propre. Cette distinction vous aide à choisir les contrôles utiles avant de commencer.

Produire et intégrer la déclaration

1. Ouvrez le générateur et identifiez les commandes consacrées à la forme, à la taille et à la position. Vous pouvez conserver les valeurs initiales lorsque vous voulez obtenir un premier aperçu sans personnalisation.

2. Sélectionnez une forme parmi circle, ellipse, triangle, hexagon, pentagon, star et diamond. Si le champ de forme reste vide, le générateur part d’un cercle. Une valeur non reconnue ne devient pas une nouvelle géométrie : elle est traitée comme un cercle.

3. Pour un cercle ou une ellipse, indiquez la taille souhaitée et le point de placement. Une taille non renseignée prend la valeur 50, alors qu’une position absente prend center. Pour les autres formes nommées, concentrez votre choix sur la silhouette, car leurs coordonnées sont fixées par le modèle associé.

4. Déclenchez la génération ou récupérez l’extrait présenté par l’outil. Le résultat contient une déclaration clip-path; copiez-la ensuite dans la règle CSS de l’élément que vous voulez masquer.

5. Affichez votre page pour observer le contour obtenu, puis revenez aux paramètres si la composition doit être différente. Pour un cercle ou une ellipse, modifiez séparément la taille et la position afin d’examiner leur effet. Pour une forme polygonale, choisissez plutôt un autre modèle lorsque la silhouette recherchée ne correspond pas à celle affichée.

6. Relisez la déclaration avant de l’intégrer à votre feuille de style. Vérifiez notamment la forme sélectionnée, le nombre utilisé pour la taille et le mot de position, car ces choix déterminent la structure du résultat pour les formes circulaires et elliptiques.

Interpréter la déclaration obtenue

Le résultat n’est pas une image exportée : c’est un extrait CSS qui contient une déclaration clip-path pour le masquage d’un élément. Pour un cercle, la taille saisie est utilisée comme pourcentage et la position est placée après le mot-clé at. Ainsi, une taille de 70 et une position center produisent une structure de cercle centrée avec 70 %.

L’ellipse reprend la taille fournie pour son premier pourcentage. Son second pourcentage correspond à 60 % de cette même valeur, et les deux dimensions sont associées à la position choisie. Ce calcul explique pourquoi une ellipse peut avoir une hauteur différente de sa largeur même lorsque vous ne renseignez qu’une seule taille.

Le triangle, l’hexagone, le pentagone, l’étoile et le losange utilisent des coordonnées polygonales fixes. La taille et la position ne redessinent donc pas ces modèles comme elles le font pour un cercle ou une ellipse. Si vous avez besoin d’une autre silhouette, sélectionnez un nom reconnu plutôt que de saisir une forme personnelle dans le champ.

Exemple pratique

Vous préparez une carte de profil et souhaitez afficher son image dans un contour circulaire centré.

Pour une vignette centrée, sélectionnez circle, saisissez 70 dans la taille, laissez center comme position, puis récupérez la déclaration affichée.

Le résultat a la forme d’une déclaration clip-path utilisant un cercle de 70 % placé avec center, par exemple circle(70% at center).

Limites

• Les modèles polygonaux disponibles utilisent des coordonnées fixes, et un nom de forme non reconnu reprend la géométrie du cercle au lieu de créer une silhouette personnalisée.

Erreurs fréquentes

• Une saisie qui ne correspond pas à circle, ellipse, triangle, hexagon, pentagon, star ou diamond est interprétée avec la géométrie du cercle. Sélectionnez un nom figurant dans cette liste lorsque vous attendez une forme polygonale ou elliptique.

Questions fréquentes

Quelle forme apparaît si je ne choisis rien ?

Lorsque la forme n’est pas renseignée, le générateur utilise circle comme point de départ. Les autres noms disponibles sont ellipse, triangle, hexagon, pentagon, star et diamond.

Que deviennent la taille et la position pour les formes rondes ?

Pour un cercle, le nombre fourni devient un pourcentage et le placement est ajouté après at. Pour une ellipse, ce nombre sert à la première dimension, tandis que la seconde vaut 60 % de la valeur saisie.

Les paramètres redimensionnent-ils une étoile ou un hexagone ?

Le triangle, l’hexagone, le pentagone, l’étoile et le losange suivent des coordonnées polygonales fixes. Changer la taille ou la position ne transforme pas ces modèles en une version redimensionnée selon ces paramètres.