如何让纯边框设计响应式?

Question

我在纯由边框制成的代码笔上发现了这个设计，我应该如何让它响应起来？

使用宽度 % 在这里似乎不起作用，设置最大宽度或创建div 容器也不起作用。

body {
margin: 0;
padding: 0;
z-index: 0;
overflow-x: hidden;
}
.triangle,
.triangle--1,
.triangle--2,
.triangle--3,
.triangle--4,
.triangle--5 {
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-style: solid;
border-width: 600px 600px 0;
content: "";
height: 0;
position: absolute;
top: 0;
left: 0;
width: 0;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-webkit-filter: drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4));
filter: drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4));
}
.triangle--1 {
border-top-color: #0151a3;
top: -60px;
z-index: 2;
}
.triangle--2 {
border-top-color: #025ebc;
top: -120px;
z-index: 3;
}
.triangle--3 {
border-top-color: #026bd5;
top: -180px;
z-index: 4;
}
.triangle--4 {
border-top-color: #0277ee;
top: -240px;
z-index: 5;
}
.triangle--5 {
border-top-color: #0d84fd;
top: -300px;
z-index: 6;
}

<div class="triangle--1"></div>
<div class="triangle--2"></div>
<div class="triangle--3"></div>
<div class="triangle--4"></div>
<div class="triangle--5"></div>

Answer 1

使用width: 50vw会使视口宽度达到 50%。

在这种情况下，它对边框很有帮助，因为边界不接受 50% 作为有效输入。

将border-width: 600px 600px 0;更改为border-width: 50vw 50vw 0;应使其水平响应。

body {
margin: 0;
padding: 0;
z-index: 0;
overflow-x: hidden;
}
.triangle,
.triangle--1,
.triangle--2,
.triangle--3,
.triangle--4,
.triangle--5 {
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-style: solid;
border-width: 50vw 50vw 0;
box-sizing: border-box;
content: "";
height: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-webkit-filter: drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4));
filter: drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4));
}
.triangle--1 {
border-top-color: #0151a3;
top: -60px;
z-index: 2;
}
.triangle--2 {
border-top-color: #025ebc;
top: -120px;
z-index: 3;
}
.triangle--3 {
border-top-color: #026bd5;
top: -180px;
z-index: 4;
}
.triangle--4 {
border-top-color: #0277ee;
top: -240px;
z-index: 5;
}
.triangle--5 {
border-top-color: #0d84fd;
top: -300px;
z-index: 6;
}

<div class="triangle--1"></div>
<div class="triangle--2"></div>
<div class="triangle--3"></div>
<div class="triangle--4"></div>
<div class="triangle--5"></div>