Skewed Background Using Border code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Skewed Background Using Border</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="sec1"></section> <section class="sec2"></section> <section class="sec3"></section> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .sec1, .sec2, .sec3 { height: 400px; width: 100%; } .sec1 { background: rgb(211,200,1); position: relative; } .sec2 { background: rgb(72, 223, 117); position: relative; } .sec3 { background: rgb(5, 1, 211); position: relative; } .sec2::before { content: ''; position: absolute; border-bottom: 100px solid rgb(72, 223, 117); border-left: 100vw solid transparent; top: -100px; } .sec2::after { content: ''; position: absolute; border-top: 100px solid rgb(72, 223, 117); border-right: 100vw solid transparent; bottom: -100px; z-index: 1; }
