0
純粋に境界線で作られたcodepenでこのデザインが見つかりました。どのように反応させるべきですか？純粋なボーダーデザインを反応的にするにはどうすればいいですか？
ここでwidth％を使用すると、最大幅を設定したり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>
こんにちは、スタックオーバーフローを歓迎する、通過する時間がかかるしてくださいここの周りにあなたの方法を知っている（https://stackoverflow.com/tour）[ツアーを歓迎]どのように読んで[mcve]の例を作成し、[ask]をチェックして、フィードバックと有用な回答を得る機会を増やしてください。 – garfbradaz
あなたはHTMLを投稿しませんでした。これは質問よりも多くのリクエストです。アップウィークのようなものを試してみてください。場合 –