JSFiddle - React, Tailwind, and code Playground

HTML

<div class='outer'>
  <div class='inner left'>
    тут какой то контент
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" id="bg" width="100%" height="100%">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0 H100 L100 0 0 100 v0 z"></path>
    </svg>
  </div>
  <div class='inner right'>
    
  </div>
</div>

SCSS

body,html{
  height: 100%;
}

div.inner{
height: 100%;
width: 50%;
position: relative;

}
div.outer{
height: 100%;
display: flex;
}

.right{
  
  background: yellow;
}

svg{
  position: absolute;
  right: -40%;
  top:0;
  z-index:1;
  width: 40%;
  fill: blue;
}