如何使用CSS实现四列斜切背景图片的全屏布局？

问题根因 #

你为第2到第4列设置了固定数值的负left偏移，4列总宽度相加为100%，整体向左偏移后右侧自然会留出对应宽度的空白，因此无法铺满全屏。

修复方案 #

仅需调整外层容器样式即可解决，完整修改后的代码如下：

HTML代码

<section class="full-width-container">
    <div class="row">
            <div id="ktk-slant-col-1" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-gerzon-pinata-9511923.jpg);clip-path: polygon(0 0, 100% 0, 76% 100%, 0% 100%);"></div>
            <div id="ktk-slant-col-2" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-lucas-fonseca-2239655.jpg);clip-path: polygon(24% 0, 100% 0, 76% 100%, 0% 100%);"></div>
            <div id="ktk-slant-col-3" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-pixabay-247763.jpg);clip-path: polygon(24% 0, 100% 0, 76% 100%, 0% 100%);"></div>
            <div id="ktk-slant-col-4" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-lucas-fonseca-2239655.jpg);clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);"></div>
    </div>
</section>

CSS代码

/* 新增外层容器样式，避免出现横向滚动条 */
.full-width-container {
  width: 100%;
  overflow: hidden;
}
/* 新增row样式，补足偏移产生的宽度缺口 */
.row {
  display: flex;
  width: calc(100% + 284px);
  margin: 0;
  padding: 0;
}
.ktk-slanted-column__item {
    position: relative;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 新增背景属性，避免图片显示异常 */
    background-size: cover;
    background-position: center;
    width: 25%;
}
.ktk-slanted-column__item::after {
    content: '';
    background: #0079C1;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    /* 新增z-index，避免遮罩被内容覆盖 */
    z-index: 1;
}
.ktk-slanted-column__item:hover::after {
    opacity: 0.66;
}
#ktk-slant-col-2 {
    left: -95px;
}
#ktk-slant-col-3 {
    left: -190px;
}
#ktk-slant-col-4 {
    left: -284px;
}

优化建议 #

如果需要适配不同屏幕尺寸，建议将固定像素的偏移值替换为百分比，clip-path坐标也统一使用百分比计算，可获得更好的响应式效果。

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