How to create a skewed background using CSS ?

13 May, 2020
The skewed background design pattern is used as a banner on the front page of a website. It gives the website more natural and pleasing look. The skewed background can be easily created using CSS before and after selectors and using skew function.
Approach: The approach is simple. We will use a skew function with before and after selector to turn our borderline into a 2-D plane. The left side portion will be done using the before selector and the right side portion will be done using after selector. You can also change the order by doing a left side using the after selector and right side using before selector.
HTML Code: HTML code is used to design the basic structure of the web page. The following code contains two <section> element with id attribute.
<!DOCTYPE html><html lang="en">  <head>    <title>Skewed Background</title></head>  <body>    <section id="geeks1">        <h1>GeeksforGeeks</h1>    </section>    <section id="geeks2"></section></body>  </html>
CSS Code:
Step 1: First, provide background to both sections and set width to 100% and height can be set according to need.
Step 2: Now, use before selector on bottom section and decrease its width to 50% as we want our border to be skewed from the center. Height can be set as per the requirement. Then use skew function to transform it into a 2-D plane at a particular angle.
Step 3: Repeat the step-2 and change left to right and negate the degree of skewness.
The below code will show the implementation of the above steps.
Tip: You can choose your degree of skewness using the inspect feature and adjusting the degree through it to get the perfect angle.
<style>    #geeks1 {        width: 100%;        height: 400px;        position: relative;        background: rgb(58, 238, 58);    }      h1 {        text-align: center;        padding: 200px;        font-family: -apple-system,             BlinkMacSystemFont, "Segoe UI",            Roboto, Oxygen, Ubuntu, Cantarell,            "Open Sans", "Helvetica Neue",            sans-serif;        color: white;        font-size: 40px;    }      #geeks2 {        width: 100%;        height: 400px;        position: relative;        background: rgb(2, 94, 25);    }      #geeks2::before {        content: "";        width: 50%;        height: 100px;        position: absolute;        top: -48px;        left: 0;        background: rgb(2, 94, 25);        transform: skewY(8deg);    }      #geeks2::after {        content: "";        width: 50%;        height: 100px;        position: absolute;        top: -48px;        right: 0;        background: rgb(2, 94, 25);        transform: skewY(-8deg);    }</style>
Complete Code: It is the combination of the above two sections to create a skewed background.
<!DOCTYPE html><html lang="en">  <head>    <title>Skewed Background</title>      <style>        #geeks1 {            width: 100%;            height: 400px;            position: relative;            background: rgb(58, 238, 58);        }          h1 {            text-align: center;            padding: 200px;            font-family: -apple-system,                 BlinkMacSystemFont, "Segoe UI",                Roboto, Oxygen, Ubuntu, Cantarell,                "Open Sans", "Helvetica Neue",                sans-serif;            color: white;            font-size: 40px;        }          #geeks2 {            width: 100%;            height: 400px;            position: relative;            background: rgb(2, 94, 25);        }          #geeks2::before {            content: "";            width: 50%;            height: 100px;            position: absolute;            top: -48px;            left: 0;            background: rgb(2, 94, 25);            transform: skewY(8deg);        }          #geeks2::after {            content: "";            width: 50%;            height: 100px;            position: absolute;            top: -48px;            right: 0;            background: rgb(2, 94, 25);            transform: skewY(-8deg);        }    </style></head>  <body>    <section id="geeks1">        <h1>GeeksforGeeks</h1>    </section>    <section id="geeks2"></section></body>  </html>
Output:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.