歪斜div，unskew僞元素背景

Question

當我傾斜一個div，使邊框處於某個角度並且糾正僞元素，使背景不歪斜時，邊框不再傾斜，因爲背景是絕對位置，當我做溢出-y：隱藏在div兩邊都在一個角度，但我希望右側僅在一個角度...我使用一個容器，所以我不能使用位置絕對和左0，因爲它會卡在容器中... 你能幫我嗎？

HTML5：

<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> 

CSS3：

#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) 
} 

This is how it supposed to look like

The website I am working on

Answer 1

斜交其曾經圖像是在前面。

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

CSS3 Transform Skew One Side http://jsfiddle.net/diegoh/mXLgF/1154/