如何使用clip-path属性消除网站板块间的空白区域？

问题描述 #

制作个人作品集网站时，给class为container的header元素添加了clip-path实现独特的头部造型，代码可正常运行，但头部与下方projects板块衔接的左右角落出现空白区域。要求不修改projects的背景色，通过给projects设置对应clip-path抵消上方裁剪效果，消除空白。

相关代码 #

HTML #

<header class="container">
        <p>
...nurtures growth through complex group problem solving. I accomplish this by applying active listening skills, focusing on soft metrics to drive key results, and take a forward thinking approach when setting up policies and processes. I believe preventing stagnation is crucial in an industry that's constantly adapting and growing day by day.
        </p>         
</header>

<!-- ********************* PROJECTS / PORTFOLIO ********************* -->

<section class="projects">
        <div class="content-wrap divider">
          <h2>Featured Projects</h2>
          <p>
            View selected projects below, more information can be found at
            <a class="btn" href="#">test.com</a>
          </p>
</section>

CSS #

.container {
    height: 95vh;
    background: #2F3061;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 80vh, 50% 100%, 0 80vh);
    overflow: hidden;
}
.projects {
    background: #F7FFF7;
}

问题示意图 #

解决方案 #

核心逻辑 #

给projects设置反向互补的clip-path，同时向上偏移板块位置，让它的背景刚好填充header裁剪后留下的左右空白区域，且与header的底部造型完全贴合。

具体代码调整 #

修改projects的CSS如下：

.projects {
    background: #F7FFF7;
    /* 向上偏移15vh，覆盖header下方的空白区域（95vh - 80vh = 15vh） */
    margin-top: -15vh;
    /* 反向裁剪，顶部形状与header底部互补，避免内容重叠 */
    clip-path: polygon(0 0, 50% 15vh, 100% 0, 100% 100%, 0 100%);
    /* 给内部内容容器预留顶部空间，防止被裁剪 */
    padding-top: 15vh;
}

原理说明 #

1. 偏移计算：header高度为95vh，clip-path中左右两侧的底部点位在80vh，因此空白区域的垂直高度为95vh - 80vh = 15vh，通过margin-top: -15vh让projects向上移动，覆盖空白。
2. 互补裁剪：header的clip-path是底部中间向下凸的形状，projects的clip-path设置为顶部中间向下凹15vh，刚好和header的底部轮廓贴合，既填充了空白，又不会让两个板块的内容重叠。
3. 内容保护：添加padding-top: 15vh抵消向上偏移的影响，避免projects内部的标题、文本被clip-path裁剪掉。

适配优化（可选） #

如果想要适配不同屏幕尺寸，建议将vh单位换成百分比，基于header的高度计算：

.container {
    height: 95vh;
    background: #2F3061;
    clip-path: polygon(0 0, 100% 0, 100% 84.2%, 50% 100%, 0 84.2%); /* 80/95≈84.2% */
    overflow: hidden;
}

.projects {
    background: #F7FFF7;
    margin-top: -15.8vh; /* 100% - 84.2% = 15.8%，对应95vh的15.8%≈15vh */
    clip-path: polygon(0 0, 50% 15.8vh, 100% 0, 100% 100%, 0 100%);
    padding-top: 15.8vh;
}

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