clip-path - Propriété CSS
Résumé des caractéristiques de la propriété clip-path
SVG : containers.
none
| border-box
| content-box
| fill-box
| margin-box
| padding-box
| stroke-box
| view-box
none
clip-path
passe progressivement d'une valeur à une autre.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.
Voici deux exemples de ce qu'il est possible d'obtenir avec clip-path
.
Remarque : les parties de l'élément qui sont masquées par clip-path
sont également insensibles aux événements de la souris,
en particulier au clic.
Syntaxes pour clip-path
.
shape
est une forme géométrique de base, définie par une des fonction CSS : circle()
, ellipse()
, polygon()
, etc.
url
est le chemin vers un fichier, le plus souvent SVG.
- 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
inset()
définit un rectangle qui sera utilisé pour découper l'élément : les parties extérieures au rectangle ne sont pas affichées.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
circle()
définit un cercle qui servira à découper l'élément : seule la partie qui est à l'intérieur du cercle est affichée.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
ellipse()
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.Consultez la syntaxe complète de la fonction
ellipse()
. - clip-path: polygon(x1 y1,x2 y2,...);
Enfin la fonction
polygon()
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
etx1
par exemple). Les coordonnées de chacun des points sont séparées par des virgules.Plus d'informations : consultez la syntaxe complète de la fonction
polygon()
. - clip-path: url(...);
La fonction
url()
fait référence à un fichier SVG. La forme définie par ce fichier sera la découpe de l'élément. L'URl indiquée peut se résumer à un signet (commençant par#
) faisant référence alors à un élément SVG présent sur la page. - clip-path: ... content-box; clip-path: ... padding-box; clip-path: ... border-box; clip-path: ... margin-box; clip-path: ... fill-box; clip-path: ... stroke-box; clip-path: ... view-box;
Ces valeurs, qui suivent une fonction de forme, indiquent la référence par rapport à laquelle la forme doit être calculée. Par exemple
circle(50%) border-box
définit un cercle centré sur la surface de l'élément incluant la bordure.⚠ A notre connaissance, seul Firefox reconnaît ces valeurs.
- clip-path:
initial
; clip-path:inherit
; clip-path:revert
; clip-path:revert-layer
; clip-path:unset
;La valeur initiale est :
.none
Exemples pour clip-path
.
Images rondes.
Très à la mode depuis quelques temps, les images rondes sont vraiment très faciles à obtenir avec clip-path
comme vous le verrez sur le premier exemple.
Le deuxième exemple est un peu plus compliqué et a nécessité un peu de SVG
.
Animation de clip-path
.
Les possibilités d'animation sont infinies : chacune des fonctions de forme accepte des valeurs numériques, qu'il est facile d'animer de façon très progressive.
Manipulation de la propriété clip-path
par programme.
Les exemples de code ci-après appliquent une découpe triangulaire (fonction polygon()
) à l'élément bleu affiché ci-dessous.
L'effet est immédiatement visible sur l'affichage.
Modifier la valeur de clip-path
en Javascript.
En Javascript, voici comment modifier la valeur de clip-path
pour un élément el
.
On voit que Javascript propose une syntaxe avec la notation typique de css, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case
plus courante en Javascript (une majuscule pour séparer les mots).
function setClipPath(el) {
el.style['clip-path']='polygon(0 0, 100% 0%, 50% 100%)';
// ou
el.style.clipPath='polygon(0 0, 100% 0%, 50% 100%)';
}
Lire en Javascript la valeur de clip-path
.
Ce code ne relit la valeur de la propriété clip-path
que si cette dernière a été affectée via l'attribut style
de l'élément, donc dans le code HTML. Les valeurs définies dans les styles via des sélecteurs CSS ne sont pas prises en compte.
function getClipPath(el) {
alert(el.style['clip-path']);
// ou
alert(el.style.clipPath);
}
Lire la valeur calculée de clip-path
en Javascript.
La valeur calculée résulte de l'évaluation de la cascade des héritages. Si aucune valeur n'est définie pour la propriété clip-path
,
ni sur l'élément lui-même, ni sur un de ses ancêtres, la valeur calculée est la valeur initiale de clip-path
, soit none
.
function getCalcClipPath(el) {
alert(window.getComputedStyle(el).getPropertyValue('clip-path'));
}
Modifier la valeur de la propriété clip-path
avec JQuery.
Tout comme Javascript, JQuery accepte également les deux notations pour le nom de la propriété, en camel-case
,
ou en kebab-case
.
function setClipPath(el) {
$(el).css('clip-path','polygon(50% 0, 100% 100%, 0% 100%)');
// ou
$(el).css('clipPath','polygon(50% 0, 100% 100%, 0% 100%)');
}
Lire la valeur calculée de la propriété clip-path
avec JQuery.
function getCalcClipPath(el) {
alert($(el).css('clip-path'));
// ou
alert($(el).css('clipPath'));
}
Exemple interactif.
On applique, sur l'élément de démo, clip-path
:ellipse()
suivi de la valeur choisie comme bloc de référence.
Prise en charge de la propriété clip-path
.
La propriété clip-path
est bien gérée dans son ensemble.
Par contre le deuxième paramètre, qui est la boîte de référence (content-box
, border-box
, etc.)
est encore très mal géré.
Consultez le tableau de compatibilité ci-dessous.
clip-path
.
fill-box
et stroke-box
.
clip-path
fill-box
stroke-box
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que clip-path
.
Les spécifications CSS éditées par le W3C sont organisées en modules. clip-path
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.