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

Question

我想为一个网站创建一个部分，该部分使用 CSS 网格分为 4 个子部分。我已经弄清楚如何向各部分添加有角度的边，但是我还没有弄清楚如何关闭每个部分之间的空白。据我所知，我不能在多边形中超过 100%，而且我不能使用像素，因为我想让网格响应。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<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>

这是codepen中的代码：https://codepen.io/LuckystrikeFTW/pen/KKpJdwo

Answer 1

你可以这样做......它的工作......* {&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;}.grid-container {&nbsp; &nbsp; display: grid;&nbsp; position:relative;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;&nbsp; &nbsp; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;&nbsp; &nbsp; grid-template-areas:&nbsp;&nbsp; &nbsp; "a a a a a a a a a a a a a a a a"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f";&nbsp; }&nbsp;&nbsp;.navbar {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: a;&nbsp;}&nbsp;&nbsp;.hero-slider {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: b;}&nbsp;&nbsp;.section1 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; position:absolute;&nbsp; width:27vw;&nbsp; height:100%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: c;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 0 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 95% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );}&nbsp;&nbsp;.section2 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; position:absolute;&nbsp; width:27vw;&nbsp; height:100%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: d;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 5% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 95% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );}&nbsp;&nbsp;.section3 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; position:absolute;&nbsp; width:27vw;&nbsp; height:100%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: e;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 5% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 95% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );}&nbsp;&nbsp;.section4 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; position:absolute;&nbsp; width:25vw;&nbsp; height:100%;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: f;&nbsp;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 5% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );}<div class="grid-container">&nbsp; <div class="navbar" style="background-color: lightskyblue;">&nbsp; &nbsp; Navbar&nbsp; </div>&nbsp; <div class="hero-slider" style="background-color: lightsteelblue;">&nbsp; &nbsp; Heroslider&nbsp; </div>&nbsp; <div class="section1" style="background-color: burlywood;">&nbsp; &nbsp; section 1&nbsp; </div>&nbsp; <div class="section2" style="background-color: darkgray;">&nbsp; &nbsp; section 2&nbsp; </div>&nbsp; <div class="section3" style="background-color: darksalmon;">&nbsp; &nbsp; section 3&nbsp; </div>&nbsp; <div class="section4" style="background-color: khaki;">&nbsp; &nbsp; section 4&nbsp; </div>

Answer 2

您可以使用像素并通过 JavaScript 使其响应。这是你的代码：<div class="grid-container">&nbsp; <div class="navbar" style="background-color: lightskyblue;">&nbsp; &nbsp; Navbar&nbsp; </div>&nbsp; <div class="hero-slider" style="background-color: lightsteelblue;">&nbsp; &nbsp; Heroslider&nbsp; </div>&nbsp; <div class="section1" style="background-color: burlywood;">&nbsp; &nbsp; section 1&nbsp; </div>&nbsp; <div class="section2" style="background-color: darkgray;">&nbsp; &nbsp; section 2&nbsp; </div>&nbsp; <div class="section3" style="background-color: darksalmon;">&nbsp; &nbsp; section 3&nbsp; </div>&nbsp; <div class="section4" style="background-color: khaki;">&nbsp; &nbsp; section 4&nbsp; </div></div>* {&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;}.grid-container {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;&nbsp; &nbsp; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;&nbsp; &nbsp; grid-template-areas:&nbsp;&nbsp; &nbsp; "a a a a a a a a a a a a a a a a"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "b b b b b b b b b b b b b b b b"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f"&nbsp; &nbsp; "c c c c d d d d e e e e f f f f";&nbsp; }.navbar {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: a;&nbsp;}.hero-slider {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: b;}.section1 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: c;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 0 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 95% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );&nbsp; width: 360px;}.section2 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: d;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 5% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 95% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );&nbsp; width: 360px;}.section3 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: e;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 5% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 95% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );&nbsp; width: 360px;}.section4 {&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; grid-area: f;&nbsp;&nbsp; &nbsp; clip-path: polygon(&nbsp; &nbsp; &nbsp; &nbsp; 5% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 0,&nbsp; &nbsp; &nbsp; &nbsp; 100% 100%,&nbsp; &nbsp; &nbsp; &nbsp; 0 100%&nbsp; &nbsp; );}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() {&nbsp; section1.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: burlywood;";&nbsp; section2.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: darkgray;";&nbsp; section3.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: darksalmon;";&nbsp; section4.style = "width: " + (window.outerWidth / 4 + 15) + "px; background-color: khaki;";}window.addEventListener("resize", resize);代码笔：https://codepen.io/marchmello/pen/OJVdyQz