html - 如何使纯边框设计具有响应性？

Question

我在 codepen 上发现这个设计完全由边框组成，我应该如何让它响应？

在这里使用宽度 % 似乎不起作用，设置最大宽度或创建 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 使视口(viewport)宽度达到 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>