如何使用波浪SVG实现上下两个div重叠的自然衔接效果

解决方案 #

核心问题是当前SVG处于正常文档流，会在上下两个div之间占据独立空间，无法实现重叠效果。你只需要调整定位规则即可：

需修改的CSS规则： #

1. 给父容器header-container添加相对定位，作为SVG的定位参照
2. 给SVG添加绝对定位，将其固定在顶部蓝色区域的底部，向上偏移自身高度实现重叠，同时设为100%宽度适配屏幕

修改后的完整代码如下：

* {
    margin: 0;
    padding: 0;
}
.header-container {
    width: 100%;
    height: 1000px;
    position: relative; /* 新增：作为绝对定位的参照 */
}
.header-top {
    width: 100%;
    height: 50%;
    background-color: #3C8DAD;
}
/* 新增SVG样式 */
.header-container svg {
    position: absolute;
    top: 50%; /* 对齐顶部蓝色区域的底部 */
    transform: translateY(-100%); /* 向上偏移自身高度，让SVG底部和蓝色区域底部对齐 */
    width: 100%;
}
.header-bottom {
    width: 100%;
    height: 50%;
    background-color: #F5A962;
}

HTML结构不需要调整，保持原有代码即可。
调整后波浪SVG会完全重叠在蓝色区域的底部，和下方橙色区域颜色一致，自然衔接没有缝隙。

内容的提问来源于stack exchange，提问作者user16052664