如何使純邊框設計具有響應性？

Question

我發現在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> 

Answer 1

使用width: 50vw會使視口的寬度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>