How to create a skewed background using CSS ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Complete Code: It is the combination of the above two sections to create a skewed background.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.