倾斜div，倾斜伪元素背景

Question

当我倾斜div时，边框是一个角度，然后倾斜伪元素，这样背景就不会倾斜了，因为背景是绝对位置，而且边框也不再倾斜了。侧面成一个角度，但我希望右侧仅成一个角度...我使用了一个容器，所以我不能使用绝对位置，而将左位置设为0，因为它将卡在容器中...您能帮我吗？

 #home-choose-homepage-desktop .btn-primary { display: inline-block; } #home-choose-homepage-desktop .grid-container, #home-choose-homepage-desktop .grid-x { height: 100%; } #home-choose-homepage-desktop { height: 30rem; position: relative; overflow: hidden; } #home-choose-homepage-desktop p { color: #FFF; } #home-choose-homepage-desktop .cell { display: flex; flex-direction: column; justify-content: center; transform: skew(-20deg); } #home-choose-homepage-desktop div.cell:before { content: ""; position: absolute; top: 0; height: 100%; width: 205%; z-index: -1; transform: scale(1.01) skew(20deg); } #home-choose-homepage-desktop .choose-detacheringen:before { left: 0; background: linear-gradient( rgba(32, 43, 62, .7), rgba(32, 43, 62, .7)), url('img/bg-detacheringen.jpg') no-repeat left center / cover; left: -100%; transition: .5s ease-out; } #home-choose-homepage-desktop .choose-detacheringen:hover:before { left: -75%; } #home-choose-homepage-desktop .choose-opleidingen:before { right: 0; background: linear-gradient( rgba(32, 43, 62, .7), rgba(32, 43, 62, .7)), url('img/bg-opleidingen.jpg') no-repeat right center / cover; right: -100%; transition: .5s ease-out; } #home-choose-homepage-desktop .choose-detacheringen:hover { z-index: 1; } #home-choose-homepage-desktop .choose-opleidingen:hover { z-index: 1; } #home-choose-homepage-desktop .choose-opleidingen:hover:before { right: -75%; } #home-choose-homepage-desktop .blurred::before { filter: blur(4px); width: 175%!important; } #home-choose-homepage-desktop .blurred .home-choose-inner { filter: blur(4px); } #home-choose-homepage-desktop .choose-deatcheringen:hover+div:before { width: 173.8% !important; transition: .5s ease-out; } #home-choose-homepage-desktop .choose-opleidingen { text-align: right; padding-left: 10%; } #home-choose-homepage-desktop .choose-detacheringen { padding-right: 10%; } #home-choose-homepage-desktop h1 { margin-bottom: .2rem; color: white; } .home-choose-inner { margin-top: 10%; transform: skew(20deg) } 

 <section id="home-choose-homepage-desktop" class="hide-for-small-only"> <div class="grid-container grid-container-padded"> <div class="grid-x grid-margin-x"> <div class="cell medium-6 choose-detacheringen"> <div class="home-choose-inner"> <h1>Detacheringen</h1> <p>Gedreven door passie, energiek en met brede ervaring in de detacheringswereld, dat zijn wij! Voor mensen die energie krijgen en plezier hebben in hun werk!</p> <a href="detacheringen-home.html" class="btn btn-primary">Meer weten</a> </div> </div> <div class="cell medium-6 choose-opleidingen"> <div class="home-choose-inner"> <h1>Opleidingen</h1> <p>SOSV geeft praktisch toepasbare opleidingen, face-to-face, in heel Nederland. Mét ervaren docenten die begrijpen wat er écht speelt. We zijn gedreven, vindingrijk én ervaren.</p> <a href="#" class="btn btn-primary">Meer weten</a> </div> </div> </div> </div> </section> 

它应该是这样的

我正在工作的网站

Answer 1

歪斜哪个图像在前面。

  -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);

CSS3转换偏斜一侧 http://jsfiddle.net/diegoh/mXLgF/1154/