如何使纯边框设计响应？

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可以获得视口宽度的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>