CSS Сетка с угловыми сторонами без пробелов - PullRequest
Новая
       1

CSS Сетка с угловыми сторонами без пробелов

0 голосов
/ 29 марта 2020

Я хочу создать раздел для веб-сайта, который разделен на 4 подраздела с использованием CSS Сетка. Я уже выяснил, как добавить угловые стороны к разделам, однако я не понял, как закрыть пробелы между каждым разделом. Насколько я понимаю, я не могу go превышать 100% в полигонах и не могу использовать пиксели, потому что я хочу, чтобы сетка реагировала. 

* {
    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%
    );
}
  
.section2 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: d;
    clip-path: polygon(
        5% 0,
        100% 0,
        95% 100%,
        0 100%
    );
}
  
.section3 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: e;
    clip-path: polygon(
        5% 0,
        100% 0,
        95% 100%,
        0 100%
    );
}
  
.section4 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: f; 
    clip-path: polygon(
        5% 0,
        100% 0,
        100% 100%,
        0 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>

Вот код в коде ручки: https://codepen.io/LuckystrikeFTW/pen/KKpJdwo

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Вы можете сделать это ... Его Рабочая ... 

* {
    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>
0 голосов
/ 29 марта 2020

Вы можете использовать пиксели и сделать их отзывчивыми с 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);



CodePen: https://codepen.io/marchmello/pen/OJVdyQz

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...