Hiding the overflow of a static element (Clip-path problem w/ Edge)

I'm making a layout that has two absolutely position elements that are positioned exactly the same. One must be cutoff by a container, while the other element will be visible outside of said container. overflow: hidden won't work since the container must be position:staticin order that both of the absolute elements will be position relative to the same parent. Therefore, I've used clip-path: inset(0 0 0 0) which works fine for all browsers I'm concerned about, except for Edge (pre-chromium). I'm hiding the effect for IE.

Any suggestions for a solution that would work for Edge as well would be appreciated.

body{
  padding: 100px;
  position: relative;
  margin: 0;
}
.container{
  position: static;
  max-width: 1280px;
  padding: 100px;
  background: lightblue;
/*   height: 500px; */
  clip-path: inset(0 0 0 0);
}
.swoop{
  position: absolute;
  top: 0;
  right: 0;
}
.col{
  width: 40%;
}

<body>
  <img class="swoop swoop-90-y" src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg" alt="Yellow swooping stripe" srcset="">
  <div class="container">
    <img class="swoop swoop-90-y pos-abs " src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg" alt="Yellow swooping stripe" srcset="">
      <div class="col">
        <h1>Hello world</h1>
        <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula. Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
        </div>
  </div>

Solution

Do it differently relying on background where the trick is to use background-attachment:fixed

body {
  padding: 100px;
  position: relative;
  margin: 0;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   top right fixed no-repeat;
}

.container {
  max-width: 1280px;
  padding: 100px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   top right fixed no-repeat, 
   lightblue;
}

.col {
  width: 40%;
}

<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>

Also like below where you have to adjust the background-position of the child to match the one of the parent

body {
  position: relative;
  margin: 0;
}

.container {
  max-width: 1280px;
  padding:80px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   calc(50% + 200px) 0 no-repeat;
}

.col {
  padding: 100px;
  width:50%;
  margin:auto;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   calc(50% + 200px) -80px no-repeat, 
   lightblue;
}

<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>
  
  <div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>