Comment puis-je créer un effet de transformation asymétrique CSS3 unilatéral avec une zone transparente ?

Transformation d'inclinaison CSS3 d'un côté

Comprendre comment créer un effet « CSS3 Transform Skew One Side » peut être utile pour divers projets de conception Web. Cependant, il est important de noter que la simple application d'une transformation asymétrique peut ne pas produire les résultats souhaités lors de l'utilisation d'une image pour l'arrière-plan.

Résoudre le problème

Dans votre domaine spécifique Dans ce cas, vous avez besoin d'une transformation CSS3 pour incliner un seul côté d'une image tout en conservant une zone inclinée transparente. La solution fournie utilisant des bordures pleines n'obtiendra pas cet effet efficacement.

La solution : Div imbriquée avec inclinaison opposée

Pour obtenir l'effet souhaité, envisagez d'utiliser une division imbriquée div pour l’image et en appliquant une valeur d’inclinaison opposée à celle du div parent. Par exemple, si vous avez appliqué une inclinaison de 20 degrés au conteneur parent, attribuez au div (image) imbriqué une valeur d'inclinaison de -20 degrés.

Exemple de code :

Pour démontrer, voici un exemple utilisant un conteneur et des divs imbriqués :

.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(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Ce code créera un Inclinaison de 20 degrés sur le conteneur du parallélogramme rouge. À l'intérieur, une image sera placée dans un div imbriqué avec une inclinaison de -20 degrés, inversant efficacement l'inclinaison appliquée au conteneur parent et révélant la zone asymétrique transparente derrière lui.

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!