CSS Skewed Background Image | Pure CSS Skewed Background CSS Skewed Background Image | Pure CSS Skewed Background Posted by SoftCode Feb 24, 2021 SOURCE CODE <!DOCTYPE html> <html> <head> <title>Skewed Background Image</title> <style> section { position: relative; width: 100%; height: 100vh; overflow: hidden; } .sec1 { background: url(background1.jpg); /*background: url(https://res.cloudinary.com/d3d3g0/image/upload/v1537026980/Labs/Building_1.jpg);*/ background-size: cover; opacity: 0.9; } .sec2 { background: #ffffff; /*padding-bottom: 6.25rem;*/ padding-bottom: 2.25rem; padding-left: 9.375rem; padding-right: 9.375rem; padding-top: 1.125rem; box-sizing: border-box; height: auto; } .sec2 h1 { font-family: poppins; font-size: 2.25rem; } .sec2 p { font-family: poppins; font-size: 1.125rem; margin-top: 2rem; text-align: justify; } .skewed1 { position: absolute; bottom: 0; left: 0; border-width: 100px 1500px 0 0; border-color: transparent #ffffff transparent transparent; /*border-width: 100px 0 0 1500px; border-color: transparent transparent transparent #ffffff;*/ border-style: solid; } </style> </head> <body> <!-- Image Section 1 --> <section class="sec1"> <div class="skewed1"></div> </section> <!-- Text Section --> <section class="sec2"> <h1>Skewed Background Image</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, dolores modi. Deserunt eius velit ab, rem quisquam veritatis nihil similique necessitatibus consectetur quos, numquam nam quo, nisi fuga harum. Impedit veniam quos amet deserunt dolor quae cumque, distinctio, illum numquam suscipit asperiores nam excepturi voluptates deleniti. Ratione distinctio hic deserunt dolorem fuga sequi provident maiores labore ipsam ipsum ad tempore quibusdam porro eaque, esse exercitationem recusandae quia illum error, iure nulla, quisquam saepe ea tenetur!</p> </body> </html> COPY THIS CODE
