Skewed Background Tutorial code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Skewed Background</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="sec1"></section> <section class="sec2"></section> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .sec1 { width: 100%; height: 500px; background: rgb(137,212,255); position: relative; } .sec2 { width: 100%; height: 500px; background: rgb(255,116,213); position: relative; } .sec2::before { content: ''; width: 50%; height: 110px; position: absolute; top: -55px; left: 0; background: rgb(255,116,213); transform: skewY(8deg); } .sec2::after { content: ''; width: 50%; height: 110px; position: absolute; top: -55px; right: 0; background: rgb(255,116,213); transform: skewY(-8deg); }
