How to use a section divider that overlaps

on the site you linked to – it is done via insertion of a svg file in a pseudo container ( :before )
but you have then an img svg ( a background-image : … svg )
i prefer to have real inline svg on that – because we can do even animated svgs as divider ( see footer ) and you can have fast influence on the background-color of non-transparent part by css with fill color.

https://webers-testseite.de/pureinstall/fullwidth-slider/

here is nearly the same svg as on your example page:
on the most svg-dividers there is allways a transparent side and a side where a background-color is forming the border to the other section.
https://webers-testseite.de/pureinstall/wp-content/uploads/waves-2.svg
The gray is just a background for contrast reasons and shows you the transparent part of the svg.
Look now to your example page: The image on top has the transparent side of the divider.
the white non-transparent part of the divider goes to the section with white background.

See here the code for that svg:

<?xml version="1.0" encoding="utf-8"?>
<svg id="Waves" data-name="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 106.24" width="100%" height="200px" preserveAspectRatio="none">
	<style>
		#Waves{background-color: #aaa}
		.bottom-bg{fill:#fff;}
		.color-1{fill:#339996; opacity:0.15;}
		.color-2{fill:#6faeb0; opacity:0.3;}
	</style>
	<title>waves</title>
	<rect class="bottom-bg" y="29.37" width="1199" height="76.87"/>
	<path class="color-1" d="M591.67,80.53l24.89,2A3705.31,3705.31,0,0,0,1200,82.26v2.53A3705.31,3705.31,0,0,1,616.56,85l-24.89-2A3704.3,3704.3,0,0,0,76.38,78.51L0,83.16V80.63L76.38,76A3704.3,3704.3,0,0,1,591.67,80.53Z" transform="translate(0 -1)"/>
	<path class="bottom-bg" d="M607.82,14.52,583,16.85A3116.84,3116.84,0,0,1,0,16.57V45.95a3116.84,3116.84,0,0,0,583,.28l24.87-2.32a3115.7,3115.7,0,0,1,514.86-5.4L1199,44V14.64l-76.32-5.52A3115.7,3115.7,0,0,0,607.82,14.52Z" transform="translate(0 -1)"/>
	<path class="color-2" d="M608.33,14.52l-24.89,2.32A3122,3122,0,0,1,0,16.57V45.95a3122,3122,0,0,0,583.44.28l24.89-2.32a3120.89,3120.89,0,0,1,515.29-5.4L1200,44V14.64l-76.38-5.52A3120.89,3120.89,0,0,0,608.33,14.52Z" transform="translate(0 -1)"/>
	<path class="color-2" d="M608.33,14.52l-24.89,2.32A3122,3122,0,0,1,0,16.57V44L76.38,38.5a3120.89,3120.89,0,0,1,515.29,5.4l24.89,2.32A3122,3122,0,0,0,1200,45.95V14.64l-76.38-5.52A3120.89,3120.89,0,0,0,608.33,14.52Z" transform="translate(0 -1)"/>
</svg>

it is nearly the same structure as a html page.
You can have styles in it etc. pp.
You see the class : bottom-bg if you must have a section following with blue background – just redefine the fill color to blue on quick css – thats all.
So you can use one svg file to have as divider for different sections.

For this way you had to know something about svg ( and how to prepare the svg code for appending / prepending it )
please give two custom class to the section #start : divider waves
(You will see later why these classes are useful) – just copy/paste and put this in the custom class field.

put this to your child-theme functions.php

function insert_dividers(){
?>
<script>
(function($){
	$('.avia-section.divider.waves').append('<svg version="1.1" id="Waves" class="bottom" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1500 200" preserveAspectRatio="none"><style type="text/css">.wav0{fill:#FFFFFF;}.wav1{opacity:0.15;fill:#339996;}.wav2{opacity:0.3;fill:#6FAEB0;}</style><g><path class="wav0" d="M1404.5,15.3c-214.5-23.4-430-20-644.1,10.2l-31.1,4.4C609.1,46.8,488.5,55.2,367.8,55.3h-5.4 C241.5,55.1,120.5,46.4,0,29.3v26v29.3V200h1500V81V55.3V25.7L1404.5,15.3z"/><path class="wav1" d="M739.6,149.7l31.1,3.8c242.7,28.7,486.6,28.5,729.3-0.5v4.8c-242.7,29-486.6,29.1-729.3,0.4l-31.1-3.8 C525.3,129,310,126.2,95.5,145.9L0,154.7v-4.8l95.5-8.7C310.1,121.5,525.3,124.4,739.6,149.7z"/><path class="wav2" d="M760.4,25.5l-31.1,4.4C486.7,63.9,242.6,63.8,0,29.3v55.3c242.6,34.5,486.7,34.6,729.3,0.5l31.1-4.4 c214.2-30.1,429.6-33.5,644.1-10.2L1500,81V25.7l-95.5-10.4C1190-8.1,974.6-4.7,760.4,25.5z"/><path class="wav2" d="M760.4,25.5l-31.1,4.4C486.7,63.9,242.6,63.8,0,29.3V81l95.5-10.4c214.5-23.4,430-20,644.1,10.2l31.1,4.4 c242.6,34.1,486.7,33.9,729.3-0.5v-59l-95.5-10.4C1190-8.1,974.6-4.7,760.4,25.5z"/></g></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

and this to your quick css:

.avia-section.divider {
  position: relative !important;
}

svg#Waves.bottom {
    position: absolute;
    bottom: -3px !important;
    z-index: 50;
    height: 200px;
    width: 100vw;
}

So – for what do we need these classes?
now every color-section with these classes gets the divider.
The first is to initialize the svg insertion – the second gives the svg data.
i have on my installations approx 15 different svg datas. they have all some names like waves, waves2, mountains, clouds etc. pp.
the second class is for what to insert as a divider.

I have always a pair for divider top position and bottom position.
The one are inserted via append (bottom position) the others are inserted via prepend:
$('.avia-section.divider.waves').prepend('<svg version="1.1" id="Waves" class="top" …

ok: no – the svg as inline svg in the functions.php. No need to upload!

you see now on your DOM – and that you can change all fill colors or opacities you like via quick css: