Question 1

Qu'est-ce que CSS clip-path?

Accepted Answer

CSS clip-path est une propriété qui définit une région de découpe pour un élément. Seul le contenu à l'intérieur de la forme spécifiée est visible, le reste est masqué. Il est utilisé pour créer des formes non rectangulaires pour des éléments comme les images, les divs et les boutons sans avoir besoin de SVG ni de balisage supplémentaire.

Question 2

Quelles formes puis-je créer avec clip-path?

Accepted Answer

CSS clip-path prend en charge polygon (formes personnalisées à plusieurs points), circle, ellipse et inset (rectangulaire avec des coins arrondis optionnels). Le type polygon est le plus flexible, permettant des triangles, des losanges, des hexagones, des flèches et pratiquement n'importe quelle forme définie par une série de points en pourcentage.

Question 3

Comment fonctionnent les valeurs en pourcentage dans clip-path?

Accepted Answer

Les valeurs en pourcentage dans clip-path sont relatives aux dimensions propres de l'élément. 0% 0% est le coin supérieur gauche, 100% 0% est le supérieur droit, 50% 50% est le centre et 100% 100% est le coin inférieur droit. Cela rend les formes clip-path réactives à la taille de l'élément.

Question 4

clip-path affecte-t-il la mise en page de l'élément?

Accepted Answer

Non, clip-path n'affecte que ce qui est visible — il ne modifie pas le modèle de boîte ni la mise en page de l'élément. L'élément occupe toujours son espace d'origine. Si vous devez modifier la mise en page en même temps que le découpage, envisagez d'utiliser shape-outside avec float pour les effets d'habillage de texte.

Question 5

Comment animer clip-path?

Accepted Answer

clip-path peut être animé avec des transitions CSS ou des animations par images clés entre deux formes compatibles (par ex. polygon avec le même nombre de points). Ajoutez transition: clip-path 0.3s ease pour activer une morphose de forme fluide au survol ou lors d'un changement d'état.

Générateur CSS Clip-Path

Questions Fréquentes

Comments & Feedback