Triangle / polygon( )

Débutons par une forme simple, avec trois points d'encrages.

.clipClass{
-webkit-clip-path: polygon( 0 100%, 50% 0, 100% 100% );
}

Pour cela nous devons penser en termes de valeurs X et Y pour créer le chemin de notre forme.
X : 0 et Y : 0 sont situés dans le coin supérieur gauche de l’élément.
X : 100% signifie que notre point est situé côté droit et Y : 100% côté bas.

Détails

Tout comme la propriété position, nous devons penser en termes de valeurs (X et Y)

traduction du chemin
x : 0%, y : 100%
x : 50%, y : 0%
x : 100%, y : 100%

Les polygones sont un des meilleurs choix pour créer des formes complexes. En effet il est possible de définir autant de points que nous voulons afin de découper notre élément dans des formes variées.

Cercle / circle()

Coordonnée centre at Rayon.

.clipClass{
-webkit-clip-path: circle(50% at 50% 50%);
}

Nous avont besoin de trois valeurs. L’axe des x et des y sont les coordonnées du centre du cercle. Le rayon définit la taille du cercle.

Détails

Un petit tips mémo technique pour s'en souvenir

“dimension du rayon (at) coordonnées du centre”
Rayon : 50% at coordonnées du centre x : 50% y :50%

Attention : la taille de l'image à découper influe sur les valeurs

Ellipse / ellipse()

La forme oblongue

.clipClass{
-webkit-clip-path: ellipse(30% 20% at 50% 50%);
}

Pour créer le chemin de l'éllipse il faut fournir quatre valeurs. Une valeur sur l’axe des x, une sur l’axe des y, et les deux valeurs correspondant au centre. Dans le même cas que le cercle, les coordonnées du centre sont précédées du mot-clé “at”

Détails

Traduction du chemin

Valeur axe x : 30%
Valeur axe y : 20%
Rayon = x : 50%, y : 50%

Rectancle Arrondis

Inset ()

.clipClass{
-webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
}

La valeur inset permet de créer des angles arrondis. Inset prend quatre valeurs, correspondant aux positions haut, droit, bas, gauche et permet l’utilisation d’un rayon sur chacune de ces valeurs.

Détails

Traduction du chemin

haut : 25% droit :0 bas :25% gauche : 0
round
rayon-haut : 0 rayon-droit : 25% rayon-bas : 0% rayon-gauche : 25%

Raccourci : -webkit-clip-path: inset(25% 0 round 0 25%);