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

你可以这样做......它的工作......

* {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

}

.grid-container {

    display: grid;

  position:relative;

    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;

  position:absolute;

  width:27vw;

  height:100%;

    justify-content: center;

    align-items: center;

    grid-area: c;

    clip-path: polygon(

        0 0,

        100% 0,

        95% 100%,

        0 100%

    );

}

  

.section2 { 

    display: flex;

  position:absolute;

  width:27vw;

  height:100%;

    justify-content: center;

    align-items: center;

    grid-area: d;

    clip-path: polygon(

        5% 0,

        100% 0,

        95% 100%,

        0 100%

    );

}

  

.section3 { 

    display: flex;

  position:absolute;

  width:27vw;

  height:100%;

    justify-content: center;

    align-items: center;

    grid-area: e;

    clip-path: polygon(

        5% 0,

        100% 0,

        95% 100%,

        0 100%

    );

}

  

.section4 { 

    display: flex;

  position:absolute;

  width:25vw;

  height:100%;

    justify-content: center;

    align-items: center;

    grid-area: f; 

    clip-path: polygon(

        5% 0,

        100% 0,

        100% 100%,

        0 100%

    );

}

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

Answer 2

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

这是你的代码：

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

代码笔：https://codepen.io/marchmello/pen/OJVdyQz