我想為一個網站創建一個部分，該部分使用 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
2 回答
ibeautiful
TA貢獻1993條經驗 獲得超6個贊
你可以這樣做......它的工作......
* {
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>
心有法竹
TA貢獻1866條經驗 獲得超5個贊
您可以使用像素并通過 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
- 2 回答
- 0 關注
- 146 瀏覽
添加回答
舉報
0/150
提交
取消