I'm using https://www.shapedivider.app/ to create a wave shape for a div box. However I don't have a solid fill color on the element behind it, I have a color with a svg background texture. How can I get my wave to have the same svg texture as my body background?
It's missing the body svg texture background: https://i.imgur.com/1OoUt6H.png
On the body, I'm using a https://www.heropatterns.com/
Example code of the problem:
<head>
<style>
body {
background-color: #0b4a34;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.custom-shape-divider-top-1611477509 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1611477509 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 112px;
}
.custom-shape-divider-top-1611477509 .shape-fill {
fill: #0b4a34;
}
</style></head>
<body>
<section style="position: relative;">
<div class="custom-shape-divider-top-1611477509">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<div style="margin-top: 50px;background-color: #fff;height: 300px;">
test
</div>
</section>
</body>
Paste into https://codepen.io/pen/
question from:
https://stackoverflow.com/questions/65869014/css-shape-wave-divider-with-the-body-background-svg-texture 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
