Exemples de clip-path CSS dans des mises en page réelles

Choisissez le préréglage hexagone, passez à la sortie sous forme de déclaration et copiez sa règle clip-path dans votre propre classe d'image carrée. Définissez largeur et hauteur égales avec object-fit: cover ; le CSS d'exemple complet utilise une boîte de démonstration 4:3 et ne doit pas être collé tel quel sur l'avatar. Vérifiez le visage près de chaque bord : changer le polygone ne déplace pas son sujet.

Appliquez l'exemple chevron à une image décorative à côté d'un appel à l'action. Comparez les mêmes coordonnées en pourcentage dans une boîte carrée et une boîte large : elles se mettent à l'échelle sur chaque axe, donc l'angle et la silhouette peuvent changer. Vérifiez aussi une mise en page mobile étroite en plus du bureau. Gardez le texte essentiel et le vrai lien en dehors de l'élément décoratif rogné.

Essayez le parallélogramme sur un calque décoratif derrière une carte. Évitez de l'appliquer à tout le conteneur de contenu si cela coupe titres, contours de focus ou boutons. Un aperçu de forme ne peut pas établir l'accessibilité clavier. Tabulez à travers le composant fini et assurez-vous que le contrôle focalisé reste visible aux deux largeurs.

Partez de l’hexagone et réglez le premier point sur X 30 %, Y 0 %. Ajoutez un point après le point sélectionné ou supprimez-en un, dans la limite de 3 à 32 points. Faites glisser, saisissez des coordonnées de 0 à 100 % ou utilisez les flèches (1 % ; avec Shift, 10 %). Copiez seulement la déclaration clip-path pour préserver votre mise en page ; le CSS complet contient des styles de démonstration. Testez des cadres carrés et larges sur ordinateur et mobile. Gardez textes et contours de focus hors du découpage et prévoyez un repli rectangulaire. L’import CSS et l’édition de circle, ellipse ou inset ne sont pas pris en charge.

Toolars assure la maintenance de ce guide et de l’outil associé. Signalez les écarts entre les instructions et le résultat actuel pour permettre leur examen conjoint.

L’exemple téléchargeable ci-dessous est une entrée de test synthétique, pas une étude de cas client. Conservez les mêmes données et réglages pour le reproduire ; vérifiez le fichier téléchargé selon les critères indiqués, pas seulement l’aperçu.

Les vérifications concernent uniquement cet exemple, pas tous les fichiers, navigateurs ou logiciels de destination. Répétez-les après toute modification de l’outil et contrôlez votre résultat avant de le partager.

Échantillons synthétiques Toolars · mis à jour le 2026-09-13. Ils illustrent le processus, pas la qualité de photos ou de scans réels ni l'acceptation d'une plateforme.

L'échantillon CSS utilise le préréglage hexagone. Dans CSS clip-path, choisissez hexagone, réglez le point horizontal sur 24 et le point vertical sur 50. Comparez les deux déclarations clip-path du téléchargement avec l'échantillon ; la couleur et les espaces peuvent différer. Testez des éléments larges et étroits : les pourcentages suivent la boîte de l'élément. Le rognage seul ne fait pas envelopper le texte environnant autour de la forme.

Télécharger l'échantillon d'entrée