Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété clip-path

Description de la propriété clip-path.

clip-path définit un contour géométrique (cercle, étoile, etc.) qui servira à découper une partie de l'élément. Cliquez sur les exemples ci-dessous pour voir les codes CSS.

CSS et HTML ne sont pas vraiment des langages de programmation : ils sont dépourvus des structures algorithmiques habituelles en programmation : tests, boucles, etc. Ce sont néanmoins des langages car ils possèdent chacun un vocabulaire et une syntaxe. A contrario XML définit bien une syntaxe mais pas de vocabulaire. En ce sens XML ne peut pas être considéré comme un langage, mais plutôt comme une norme, une référence sur laquelle vont pouvoir se construire d'autres langages. CSS est un complément à tous ces langages basés sur HTML ou XML : il enrichit leurs possibilités en apportant de très nombreuses possibilités de mise en forme et de mise en page. L'acronyme CSS décrit assez bien ce que va faire CSS : fourni des styles de mise en forme. Ces deniers seront appliqués par le navigateur ou l'outil de restitution du document, que ce soit une restitution classique (affichage) ou une restitution sonore. Normalisé par le W3C, CSS est maintenant traité et bien reconnu par tous les navigateurs.
Exemple pour CSS clip-path

Syntaxes pour clip-path.

  • clip-path: none;

    Valeur par défaut. Aucune découpe n'est effectuée : l'élément est visible en entier.

  • clip-path: inset(h d b g);

    La fonction Object définit un rectangle qui sera utilisé pour découper l'élément : les parties extérieures au rectangle ne sont pas affichées.

    Clip-path avec iner()

    Reportez-vous à la page sur la fonction inset() pour une description complète de la syntaxe de cette fonction.

  • clip-path: circle(r at x y);

    Comme son nom l'indique, la fonction Object définit un cercle qui servira à découper l'élément : seule la partie qui est à l'intérieur du cercle est affichée.

    Clip-path avec circle()

    Reportez-vous à la page sur la fonction circle() pour une description complète de la syntaxe.

  • clip-path: ellipse(r1 r2 at x y);

    Semblable à la précédente, la fonction Object définit l'ellipse qui servira à découper l'élément : seule la partie qui est à l'intérieur de l'ellipse est affichée.

    Clip-path avec ellipse()

    Consultez la syntaxe complète de la fonction ellipse().

  • clip-path: polygon(x1 y1,x2 y2,...);

    Enfin la fonction Object définit une surface délimitée par une ligne brisée. Seule la partie qui est à l'intérieur de ce polygone est affichée.
    Chaque sommet de cette ligne brisée est un point définit par ses coordonnées (x1 et x1 par exemple). Les coordonnées de chacun des points sont séparées par des virgules.

    Clip-path avec polygon()

    Plus d'informations : consultez la syntaxe complète de la fonction polygon().

  • clip-path: url(...);

    La fonction Object fait référence à un fichier SVG. La forme définie par ce fichier sera la découpe de l'élément.

  • clip-path: fill-box | stroke-box | view-box;

    La documentation de ces valeurs est sera prochainement en ligne.

  • clip-path: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Prise en charge de la propriété clip-path.

La propriété est bien gérée dans son ensemble. Reste quelques manques lorsqu'elle est appliquée à un élément HTML (pas une simple image). Consultez le tableau de compatibilité ci-dessous.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Formes géométriques - Propriétés.

  • shape-outside : Définit le contournement du texte pour un élément flottant.

Formes géométriques - Fonctions.

  • circle() : Définit un cercle.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • ellipse() : Définit une ellipse.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • polygon() : Définit une forme.

Éléments flottants (côte à côte) - Propriétés.

  • clear : Autorise ou interdit le côtoiement des éléments (habillage).
  • float : Positionnement relatif des éléments les uns par rapport aux autres.
  • shape-outside : Définit le contournement du texte pour un élément flottant.

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.