how to make cutouts in the background color

Question

I'm learning web design. And I'm having some trouble with clipping my background color. I've tried to use liniar-gradient as background, but that is no good because it gives jagged lines

so I want to recreate this:

I'm not that familiar with SVGs, but I was thinking I could use clip-background for the cutouts. But I can't get it to work. And I have the extra issue of how I'm going to stack all the different bg against each other? How do is do this.

:root {
  --web-prim-clr: rgba(231, 59, 43, 0.9);
}

/* -------svg--------- */
.webDev-BG-poly {
  fill: var(--web-prim-clr);
  opacity: 0.9;
}

/* ------------------- */
.webdesign-header {
  background: var(--web-prim-clr);
}
.webdesign-header::before {
  background-clip: url(#clip);
}

<section class="webdesign webdesign-header">
<svg id="webdev-clip" data-name="webdev-clip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1524 139"><defs></defs><g id="clip" data-name="Laag 2"><polygon class="cls-1" fill="#cf6" points="0 139 0 0 1524 0 0 139"></polygon></g></svg>

<h2>Ik heb hier een <span>goed gevoel bij..</span></h2>

<p><span>Misschien ken je ons nog maar net, maar ik heb er al een goed gevoel bij.</span>Wij zijn een digital content bureau uit Gent, en ons doel is om onvergetelijke ervaringen te creëren, speciaal voor mensen zoals jij. We zijn gepassioneerd door het ontwikkelen van digitale content voor het web en mobiele apps. Neem even de tijd om ons beter te leren kennen, zodat we daarna samen op avontuur kunnen vertrekken.</p>


</section>

i've tried to use liniar-gradient as background. with a to bottom right corner but that was giving a jagged edge. then i've tried using svg wut they did not scale to text content and eachother.