Skew on div, unskew pseudo element background

Question

When I skew a div so the border is at a angle and unskew the pseudo element so the background isn't skewed the border isn't skewed anymore because the background is position absolute and when I do overflow-y: hidden on the div both sides are at a angle but I want the right side to be at a angle only... I use a container so I can't use position absolute and left 0 because it will be stuck in de container... Can you help me?

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

This is how it supposed to look like

The website I am working on

Answer 1

Skew which ever image is in front.

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

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