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.
- 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.
Complete Code: It is the combination of the above two sections to create a skewed background.
- How to create Skewed Background with hover effect using HTML and CSS?
- How to Create Wave Background using CSS ?
- How to Create a Wave Image for a Background using HTML and CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- How to create texture background using CSS ?
- How to create custom banner background using CSS ?
- How to create a sliding background effect using CSS ?
- How to create Chess pattern background using HTML and CSS ?
- Difference between background and background-color
- How to Create Animated Background using CSS3 ?
- How to set multiple background images using CSS?
- How to give text or an image transparent background using CSS?
- Set the size of background image using CSS ?
- How to stretch and scale background image using CSS?
- JQuery | Setting background-image using CSS property
- How to Rotate Container Background Image using CSS ?
- How to use text as background using CSS ?
- How to Add Image in Text Background using HTML and CSS ?
- How to Create Background Like TV Noise in a Canvas ?
- CSS | Hue Background
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.