clip-path : La propriété CSS pour découper les éléments HTML

La propriété CSS clip-path permet de définir une région de découpe pour un élément HTML. Seules les parties de l’élément qui se trouvent à l’intérieur de cette région seront visibles. Cette propriété est extrêmement utile pour créer des effets visuels avancés et des animations complexes sans avoir besoin de manipuler les images directement.

La propriété clip-path

• clip-path: none;
• clip-path: circle(50% at 50% 50%);
• clip-path: ellipse(50% 25% at 50% 50%);
• clip-path: inset(10% 20% 30% 40%);
• clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

La propriété clip-path s’applique généralement à un élément individuel, mais vous pouvez également l’utiliser sur un groupe d’éléments en utilisant un sélecteur CSS approprié.

clip-path fonctionne de manière superposée avec d’autres propriétés CSS, telles que border-radius et background-image. Le navigateur découpera l’élément en fonction de la forme définie, masquant les zones situées en dehors de la zone de découpe.

Les valeurs de la propriété CSS clip-path

• circle() : Crée un cercle. La syntaxe est circle([<rayon> | <taille-x> <taille-y>]), où rayon définit la taille du cercle et <taille-x> et <taille-y> définissent respectivement la largeur et la hauteur du cercle elliptique.
• ellipse() : Crée une ellipse. La syntaxe est identique à circle().
• polygon() : Crée une forme polygonale en spécifiant les coordonnées des points qui définissent ses sommets. La syntaxe est polygon(<coordonnées-point1>, <coordonnées-point2>, ..., <coordonnées-pointN>).

• inset() : Crée une forme en retrait par rapport au bord de l’élément. La syntaxe est inset(<haut> <droite> <bas> <gauche>), où chaque valeur représente un décalage par rapport au bord correspondant.

La propriété clip-path peut être animée à l’aide de CSS Animations et Transitions, vous permettant de créer des effets visuels dynamiques et captivants. Imaginez faire apparaître une forme en fondu ou déformer un élément au fil du temps !

La propriété clip-path est bien prise en charge par les navigateurs modernes, mais il est toujours bon de vérifier la compatibilité pour les projets destinés aux anciens navigateurs.

Exemples concrets de la propriété CSS clip-path

Découper une image en forme de cercle

Voici un premier exemple pratique où nous découpons une image en forme de cercle :

<img src="image" alt="Photo découpée avec clip-path" class="profile-picture">

.profile-picture {
    width: 150px;
    height: 150px;
    clip-path: circle(50%);
}

Création d’un bouton en forme de losange

Dans ce deuxième exemple, nous allons créer un bouton avec l’élément HTML <button> et lui donner une forme de losange :

<button class="diamond-button">Click Me</button>

.diamond-button {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    display: block;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 auto;
    cursor: pointer;
}

Utilisation de clip-path avec une animation

Dans cet exemple, l’élément passe d’un cercle de 30% de sa taille à 70% de sa taille en boucle, créant un effet d’expansion et de contraction :

<div class="animated-element"></div>

.animated-element {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  clip-path: circle(50%);
  animation: expand-circle 3s infinite alternate;
}

@keyframes expand-circle {
  0% {
    clip-path: circle(30%);
  }
  100% {
    clip-path: circle(70%);
  }
}

La propriété clip-path de CSS offre une multitude de possibilités pour découper des éléments HTML de manière créative et interactive. Que ce soit pour des images de profil, des boutons stylisés ou des animations complexes, clip-path est un outil puissant qui peut ajouter un niveau de sophistication à vos conceptions web. Avec un peu de créativité, vous pouvez utiliser clip-path pour créer des effets visuels impressionnants !