Comment puis-je incliner un seul côté d'une image à l'aide des transformations CSS3 ?

Incliner un côté avec la transformation CSS3

Incliner une image en CSS3 est une tâche simple, mais incliner un seul côté peut être un peu plus difficile.

La solution fournie utilisant les propriétés de bordure ne convient pas lorsque vous avez un arrière-plan d'image au lieu d'une couleur unie. De plus, incliner les deux côtés de l'élément au lieu d'un seul peut être limitant.

Pour obtenir une inclinaison unilatérale, envisagez cette approche :

Désincliner l'image

Utilisez un élément div imbriqué pour contenir l'image. Appliquez une valeur d'inclinaison opposée au div imbriqué pour contrecarrer l'inclinaison appliquée au parent.

Exemple de code :

<div class="container">
  <div>

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Cette configuration n'incline effectivement que un côté de l’image, laissant l’autre côté droit. La zone asymétrique reste transparente en raison du débordement : propriété cachée sur le conteneur parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!