L shaped overlapping div

  .stage {
    position: relative;
    width: 800px;
    height: 500px;
    display: flex;
  }
  .left, .right {
    width: 50%;
    height: 100%;
  }
  .left  { background: teal; }
  .right { background: navy; }
  .l-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;   
    height: 100%;
    background: rgba(255,255,255,0.3);
    clip-path: polygon(
      0%   0%,    / top-left /
      20%  0%,    / top of vertical bar /
      20%  70%,   / inner corner /
      100% 70%,   / end of horizontal arm /
      100% 100%,  / bottom-right /
      0%   100%   / bottom-left /
    );
  }
  

    

    

    

  

Perhaps you're overthinking it? Why not make the whole thing as a background image for the page?