Creating Skewed Background In CSS Using Transform

C

The skewed background has become much popular recently, developers and designers are using it to build and design creative footer, header,  divider and sections in their web page designs. In this article, we will cover everything you need to know about creating skewed background In CSS.

CREATING SKEWED BACKGROUND IN CSS USING CSS TRANSFROM
CREATING SKEWED BACKGROUND IN CSS USING CSS TRANSFORM

Creating Skewed Background In CSS

In order to create the skewed background, we will be using the pseudo-elements ::before and ::after and CSS3 Transform.

Follow the steps below to create your own skewed background.

  • Creating Files HTML & CSS
  • Writing basic HTML codes
  • Linking  CSS file
  • Creating our skewed background

Creating Files HTML & CSS

In this project, we going to write our HTML and CSS codes separately.  So go ahead and create your own HTML file ( Name it Index.html ) and CSS file ( Name it style.css ). and write the following codes inside your HTML file.

Now that we have written our basic HTML codes lets link our CSS file by adding the following line just after the title tag inside the head tag.

As in my project folder, my HTML & CSS file are in the same folder so there is no need to mention the CSS folder.

After you linked your CSS file, now open your HTML file and create to div and name your first div  firstSection and your second div  secondSection. your code should be as below.

Now you are done with HTML and open your style.css file. In order to remove the browsers preset margin and padding. write down the following code.

let’s define the width, height, background-color and a position for our classes. In this case we are going to set the width to 100% , height of 400px , background color : #ffbf00 for our firstSection class and #343D46 for our secondSection class. and a position of relative for both of our classes.

An element with position: relative; is positioned relative to its normal position.

now your code should be the same as the code below.

and the result will be as the showing in the image below.

How to Create Skewed Background In CSS
How to Create Skewed Background In CSS

its time to skew the background using pseudo-elements ::before and ::after and CSS3 Transform.

transform: skewY(10deg)  makes the ::after block skew or angle at 10 degrees.

The result should be as the image below.

How to Create Skewed Background in CSS
How to Create Skewed Background in CSS

The Complete Code of this project

CSS Codes

 

Conclusion

This is how you can create a skewed background in css. I hope you learn something from this article and I will try to write more article about skewing background using CSS in web design section. if you have any idea, question, suggestion please leave us a comment.

About the author

Raza Sarwari

Add comment

By Raza Sarwari
%d bloggers like this: