JSFiddle - React, Tailwind, and code Playground

HTML

<div class="angled_container angled_container--open-right">
  <div class="col">
    <span>LEFT</span>
  </div>
  <div class="col">
    <span>RIGHT</span>
  </div>
</div>
<br/>
<div class="angled_container angled_container--open-left">
  <div class="col">
    <span>LEFT</span>
  </div>
  <div class="col">
    <span>RIGHT</span>
  </div>
</div>

SCSS

.angled_container {
  background-color: #fff;
  height: 200px;
  position: relative;
  overflow: hidden;
  clear: both;
    
    $angle: 12deg;
    
    &:before, 
    &:after {
        content: "";
        width: 110%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
    }
    
    &:before {
        background-color: #606060;
        transform: rotate($angle);
        -webkit-transform-origin: left top;
        left: 0;
    }

    &:after {
      background-color: #6bb2c6;
      transform: rotate($angle*-1);
      -webkit-transform-origin: right top;
      left: -10%
    }
    
}

.angled_container--open-left {
    &:before {
        background-color: #6bb2c6;
        z-index:2;
    }   
    &:after {
        background-color: #606060;
        z-index:1;
    }   
}

.angled_container--open-right {
    &:before {}   
    &:after {}   
}

.col {
  width: 50%;
  background: black;
  float: left;
  display: block;
  z-index: 3;
  position: relative;
  display: none;
}

.col span {
  color: #fff;
  padding: 20px;
  display: block;
}