Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a skewed background using CSS ?

  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!