Html CSS网格，有角度的边，没有空白

我想为一个网站创建一个部分，使用CSS网格将其分为4个子部分。我已经知道了如何在剖面中添加有角度的边，但是我还没有知道如何关闭每个剖面之间的空白。据我所知，我不能超过100%的多边形，我不能使用像素，因为我想有网格响应

*{
框大小：边框框；
填充：0；
保证金：0；
}
.网格容器{
显示：网格；
宽度：100vw；
高度：100vh；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板区域：
“a a a a a a a a a a a”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“c c c d d d e f f”
“c c c d d d e f f”
“c c c d d d e f f”
“c c c d d d e f f”
“c c c d d d e f f”；
}
.navbar{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：a；
}
.hero滑块{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：b；
}
.第1节{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：c；
剪辑路径：多边形(
0 0,
100% 0,
95% 100%,
0 100%
);
}
.第2节{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：d；
剪辑路径：多边形(
5% 0,
100% 0,
95% 100%,
0 100%
);
}
.第3节{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：e；
剪辑路径：多边形(
5% 0,
100% 0,
95% 100%,
0 100%
);
}
.第4节{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：f；
剪辑路径：多边形(
5% 0,
100% 0,
100% 100%,
0 100%
);
}

导航栏
英雄滑块
第一节
第二节
第三节
第四节

您可以这样做。。。它的工作

*{
框大小：边框框；
填充：0；
保证金：0；
}
.网格容器{
显示：网格；
位置：相对位置；
宽度：100vw；
高度：100vh；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板区域：
“a a a a a a a a a a a”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“b b b b b b”
“c c c d d d e f f”
“c c c d d d e f f”
“c c c d d d e f f”
“c c c d d d e f f”
“c c c d d d e f f”；
}
.navbar{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：a；
}
.hero滑块{
显示器：flex；
证明内容：中心；
对齐项目：居中；
网格面积：b；
}
.第1节{
显示器：flex；
位置：绝对位置；
宽度：27vw；
身高：100%；
证明内容：中心；
对齐项目：居中；
网格面积：c；
剪辑路径：多边形(
0 0,
100% 0,
95% 100%,
0 100%
);
}
.第2节{
显示器：flex；
位置：绝对位置；
宽度：27vw；
身高：100%；
证明内容：中心；
对齐项目：居中；
网格面积：d；
剪辑路径：多边形(
5% 0,
100% 0,
95% 100%,
0 100%
);
}
.第3节{
显示器：flex；
位置：绝对位置；
宽度：27vw；
身高：100%；
证明内容：中心；
对齐项目：居中；
网格面积：e；
剪辑路径：多边形(
5% 0,
100% 0,
95% 100%,
0 100%
);
}
.第4节{
显示器：flex；
位置：绝对位置；
宽度：25vw；
身高：100%；
证明内容：中心；
对齐项目：居中；
网格面积：f；
剪辑路径：多边形(
5% 0,
100% 0,
100% 100%,
0 100%
);
}

导航栏
英雄滑块
第一节
第二节
第三节
第四节

您可以使用像素并使用JavaScript使其响应。

这是您的代码：

---

代码笔：

添加左边距：-25px；对于第2节，我认为它对所有人都有效。@Grumpy这似乎是正确的想法，但是在更大的屏幕上，我注意到仍然有空间。如果没有其他选择，我可以尝试，我想我必须玩不同的数字和单位。谢谢！你能解释一下为什么我需要指定网格容器和分区的位置吗？是的，因为你使用的网格是正确的，然后你的分区的每个网格都按照你指定的方式占用空间。现在从该分区开始剪裁，意味着另一个部分将不会填满剩余的空间为了实现这一点，我们正在做的是干扰渲染的常规流程，即静态和扩展每个部分，使其填满空间。你明白了吗？

<div class="grid-container">
  <div class="navbar" style="background-color: lightskyblue;">
    Navbar
  </div>
  <div class="hero-slider" style="background-color: lightsteelblue;">
    Heroslider
  </div>
  <div class="section1" style="background-color: burlywood;">
    section 1
  </div>
  <div class="section2" style="background-color: darkgray;">
    section 2
  </div>
  <div class="section3" style="background-color: darksalmon;">
    section 3
  </div>
  <div class="section4" style="background-color: khaki;">
    section 4
  </div>
</div>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.grid-container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "a a a a a a a a a a a a a a a a"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "b b b b b b b b b b b b b b b b"
    "c c c c d d d d e e e e f f f f"
    "c c c c d d d d e e e e f f f f"
    "c c c c d d d d e e e e f f f f"
    "c c c c d d d d e e e e f f f f"
    "c c c c d d d d e e e e f f f f";
  }

.navbar { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: a; 
}

.hero-slider { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: b;
}

.section1 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: c;
    clip-path: polygon(
        0 0,
        100% 0,
        95% 100%,
        0 100%
    );
  width: 360px;
}

.section2 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: d;
    clip-path: polygon(
        5% 0,
        100% 0,
        95% 100%,
        0 100%
    );
  width: 360px;
}

.section3 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: e;
    clip-path: polygon(
        5% 0,
        100% 0,
        95% 100%,
        0 100%
    );
  width: 360px;
}

.section4 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: f; 
    clip-path: polygon(
        5% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

var section1 = document.getElementsByClassName('section1')[0];
var section2 = document.getElementsByClassName('section2')[0];
var section3 = document.getElementsByClassName('section3')[0];
var section4 = document.getElementsByClassName('section4')[0];

function resize() {
  section1.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: burlywood;";
  section2.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: darkgray;";
  section3.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: darksalmon;";
  section4.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: khaki;";
}

window.addEventListener("resize", resize);