CSS3 Fermer la transformation d'un côté

Comprendre comment créer un "CSS3 Transform Skew One Side" peut être utile pour divers projets de conception Web. Cependant, il est important de noter que le simple fait d'appliquer une transformation de biais peut ne pas produire les résultats souhaités lors de l'utilisation d'une image pour l'arrière-plan. La solution fournie utilisant des frontières solides n'atteindra pas cet effet efficacement.

La solution: Div imbriqué avec un biais opposé

pour atteindre l'effet souhaité, envisager d'utiliser une div imbriquée pour l'image et appliquer une valeur skew opposée à celle du parent Div. Par exemple, si vous avez appliqué une asymétrie à 20 degrés au conteneur parent, donnez à la valeur de div imbriquée (image) de -20 degrés. débordement: caché; } #parallélogramme { Largeur: 150px; hauteur: 100px; marge: 0 0 0 -20px; transformée: biais (20deg); Contexte: rouge; débordement: caché; Position: relative; } .image { Contexte: URL (http://placekitten.com/301/301); Position: absolue; En haut: -30px; Gauche: -30px; à droite: -30px; En bas: -30px; transformée: skew (-20deg); }

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