How do I put shapes (transform) over each other with ::before and ::after in CSS? Edge wont display shape over background

Question

I created two slanted shapes to be displayed on top of a container with background image. I used ::before and ::after to get the shapes over the same image.

It works in Firefox and Chrome but not in edge.

What am I missing?

This is what I want and what happens in Chrome:

https://www.dropbox.com/s/bny60o505cz2f2k/screen1.png

This is what happens in Edge: https://www.dropbox.com/s/ix6v8gyxq0y6eo4/screen2.png

The blue shape has ::before, but ::before is not displayed in Edge. (when I give the blue shape the pseudo element ::before it is displayed but then the white shape is not possible.

.titelsectie {
    z-index:0!important;
    background-color: rgba(255,255,255,0);
    background-image: url(https://images.pexels.com/photos/2404370/pexels-photo-2404370.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
    margin-bottom: 40px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-left: -30px;
    margin-right: -30px;
    position: relative;
    z-index: 0!important;
    padding-top: 100px!important;
}
.titelsectie::after{
    content: " ";
    background-color: #ffffff;
    position: absolute;
    width: 10%;
    height: 100%;
    left: -8%;
    top: 0;
    z-index: 0!important;
    transform-origin: bottom left;
    -ms-transform: skew(-16deg, 0deg);
    -webkit-transform: skew(-16deg, 0deg);
    transform: skew(-16deg, 0deg);
}
.titelsectie::before {
    content: " ";
    background-color: #201547;
    position: absolute!important;
    width: 10%;
    height: 85%;
    left: -8%;
    top: 0;
    z-index: 999!important;
    transform-origin: bottom left;
    -ms-transform: skew(-16deg, 0deg);
    -webkit-transform: skew(-16deg, 0deg);
    transform: skew(-16deg, 0deg);
}

<div class="titelsectie">
  <div class="fusion-builder-row fusion-row ">
    <div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_2 fusion-builder-column-1 fusion-one-half fusion-column-first 1_2" style="margin-top:0px;margin-bottom:20px;width:48%; margin-right: 4%;">
      <div class="fusion-column-wrapper" style="padding: 0px 0px 20px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url=""> 
    <!-- some content with text, buttons and titles--> 

      </div>
    </div>
  </div>
</div>

Answer 1

Solved!

Thanks for your responses. I also noticed that the stripped down code worked on my side. Therefore the code must be correct.

So I decided to use the inspect tool in edge.

I'm building my site in WordPress with the theme AVADA. I found out that avada added some CSS just for IE / Edge. on the before element for the full width part. And that CSS was overwriting all the important bits. (.fusion-fullwidth.fusion-ie-mode::before)

I added !important to all those bits and all is fine now! (can't believe I spend big part of yesterday afternoon trying to solve this ;-) )