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.
<!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:
Please Login to comment...