I have been experimenting with creating a wave-shaped divider on my webpage that also interacts with text overlays. I designed the concept in Adobe XD for both mobile and desktop, but I am unsure of how to implement it in code. My attempt using an SVG resulted in it looking like this on mobile and like this on desktop. I believe using an SVG for the line is the best approach, but I am struggling with getting the CSS right.
The SVG file appears as follows:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><polygon class="cls-1" points="0.5 86.54 173.5 0.54 292.5 43.54 398.5 66.54 486.5 43.54 592.5 31.54 738.5 83.54 916.5 31.54 1000.5 43.54 1000.5 1000.54 0.5 1000.54 0.5 86.54"/></svg>
My current CSS is:
.waves {
position: absolute;
background-color: #B0E0E6;
bottom: 0;
left: 0;
height: 70vh;
width: 100%;
}
In my HTML, I have included
<img src={waves} alt="Background Waves" className="waves"></img>Any assistance would be greatly appreciated.