Is there a way to escape clip-path: from child elements? I.E images positioned relative to the clipped background, also get clipped

Question

I am trying to position an SVG image over a clipped background that parallaxes over another background. I want the SVG to be half over the background and half over the foreground, but it gets clipped along with the background using clip path. Is there another method i could be using for the effect that would work without clipping SVG, or are there ways to disable the inherited effect? Bear in mind, I would like to keep it positioned relative to this background.

CSS in question

.content
{
  height: 300vh;
  min-height: 150vh;
  background: #25282A;
  clip-path: polygon(-400% 100%, 100% 100%, 100% 10%);
  position: relative;
  z-index: 1;
}
.content img{
  position: relative;
  top: 20vh;
  left: 2vw;
  z-index: 3;
}

HTML

 <section class="content">
          <img src="/Asssets/RWR food image.jpg">
         <img src="/Assets/Title.svg" />
        </section>

Answer 1

You need to consider another alternative as clip-path will clip the element and all its content.

Since it's about background, you can rely on gradient like below to create a similar effect.

.content {
  height: 300vh;
  min-height: 150vh;
  background: 
    /*a triangle shape offested by 50px from the top taking 25% of the height*/
    linear-gradient(to bottom right,transparent 49.8%,#25282A 50%) 0 50px/100% 25%,
    /*fill the remaining (75% - 50px) with solid color*/
    linear-gradient(#25282A,#25282A) bottom/100% calc(75% - 49px);
  background-repeat:no-repeat;
}

<div class="content">

</div>