Comment incliner un seul côté d'un élément avec les transformations CSS3 ?

Transformation CSS3 inclinée d'un seul côté

Les transformations CSS sont un outil puissant qui peut être utilisé pour manipuler l'apparence des éléments sur une page Web. L'une des transformations les plus polyvalentes est la transformation d'inclinaison, qui peut être utilisée pour incliner un élément à un angle spécifié.

Cependant, par défaut, la transformation d'inclinaison affecte également les deux côtés d'un élément. Cela peut être limitant dans certains cas, par exemple lorsque vous souhaitez incliner un seul côté d'un élément, comme une image d'arrière-plan.

Heureusement, il existe un moyen d'incliner un seul côté d'un élément en utilisant CSS . En utilisant un div imbriqué pour l'élément que vous souhaitez incliner, vous pouvez appliquer la transformation d'inclinaison au div parent, puis appliquer la transformation d'inclinaison opposée au div enfant. Cela n'inclinera effectivement qu'un seul côté de l'élément.

Voici un exemple de la façon d'incliner un seul côté d'un élément :

.container {
  overflow: hidden;
}

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

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

Ce CSS créera un div avec un rouge arrière-plan et une largeur et une hauteur de 150 px et 100 px, respectivement. Le div sera incliné d'un angle de 20 degrés vers la droite et contiendra une image. L'image sera redressée en lui appliquant la transformation d'inclinaison opposée (-20 degrés).

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!