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>
#geeks 1 {
width : 100% ;
height : 400px ;
position : relative ;
background : rgb ( 58 , 238 , 58 );
}
h 1 {
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 ;
}
#geeks 2 {
width : 100% ;
height : 400px ;
position : relative ;
background : rgb ( 2 , 94 , 25 );
}
#geeks 2: :before {
content : "" ;
width : 50% ;
height : 100px ;
position : absolute ;
top : -48px ;
left : 0 ;
background : rgb ( 2 , 94 , 25 );
transform: skewY( 8 deg);
}
#geeks 2: :after {
content : "" ;
width : 50% ;
height : 100px ;
position : absolute ;
top : -48px ;
right : 0 ;
background : rgb ( 2 , 94 , 25 );
transform: skewY( -8 deg);
}
</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:
Last Updated :
13 May, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...