Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a skewed background using CSS
A skewed background is a design effect that creates a diagonal or angled appearance on the background of a web page or element. This effect can be achieved using CSS transforms to skew the container element, along with other CSS properties like background-color, gradients, and images to create the desired visual effect.
Approach -1: using the transform property in CSS
Algorithm
Set the title of the document as “Skewed Background”.
Define CSS variables for the skew angle and background colors
Set the transform property to skew the background using the CSS transform property
Set a linear gradient background using the CSS background property
Set padding and text color for the skewed background
Define styles for the h1 and p elements inside the skewed background
Add a div element with the class "skewed-background" for the skewed background
Add a h1 element inside the div with the text "Welcome to Tutorialspoint"
Add a p element inside the div with the text "This is an example of a skewed background using CSS"
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skewed Background</title>
<!-- Define CSS variables for skew angle and background colors -->
<style>
:root {
--skew-angle: -10deg;
--bg-color-1: #e0c3fc;
--bg-color-2: #8ec5fc;
}
/* Skew the background using the CSS transform property */
.skewed-background {
transform: skewY(var(--skew-angle));
/* Set a linear gradient background using the CSS background property */
background: linear-gradient(110deg, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
padding: 50px;
color: #000000;
}
/* Set styles for the h1 and p elements inside the skewed background */
.skewed-background h1 {
font-size: 36px;
margin: 0;
}
.skewed-background p {
font-size: 18px;
margin: 20px 0 0;
}
</style>
</head>
<body>
<!-- Add a div element with the class "skewed-background" for the skewed background -->
<div class="skewed-background">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using CSS</p>
</div>
</body>
</html>
Approach - 2 using the clip-path property in CSS
Algorithm
Declare the title of the document.
Set the body to have no margin or padding.
Create a div with the class name "skewed-background" within the body.
Set the height of the div to be the full viewport height using the "vh" unit.
Create a linear gradient background with a 110 degree angle using the "linear-gradient" property.
Use the "clip-path" property to create a polygon shape that gives the skewed appearance of the background.
Add padding to the div to provide spacing between the content and the edges of the skewed background.
Center the content both horizontally and vertically using "display: flex" and "justify-content: center" and "align-items: center".
Add a header and a paragraph.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skewed Background using clip-path</title>
<!-- Define CSS styles for the skewed background -->
<style>
body {
margin: 0;
padding: 0;
}
.skewed-background {
height: 100vh;
background: linear-gradient(110deg, #e0c3fc 0%, #8ec5fc 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); /* Use clip-path to create a skewed shape */
padding: 50px;
color: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.skewed-background h1 {
font-size: 36px;
margin: 0;
}
.skewed-background p {
font-size: 18px;
margin: 20px 0 0;
}
</style>
</head>
<body>
<!-- Create a div element with the class "skewed-background" to hold the content of the skewed background -->
<div class="skewed-background">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using clip-path property in CSS.</p>
</div>
</body>
</html>
Approach: 3 Using a CSS grid
Algorithm
Define a grid container with 2 columns and 1 row using CSS Grid.
Set the height of the container to 100vh and hide any overflowing content.
Create a content div and a background div as the two grid items within the container.
Position the content div in the first column and row and set its background color to white with padding for text.
Position the background div in the first and second columns and first row and skew it horizontally by -12deg.
Set the background of the skewed div to a linear gradient from #e0c3fc to #8ec5fc and position it behind the content div with a z-index of -1.
Add text to the content div with a heading and paragraph to display on top of the skewed background.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skewed Background with CSS Grid</title>
<style>
/* Set margin and padding to zero */
body {
margin: 0;
padding: 0;
}
/* Create a container using CSS Grid */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 0;
height: 100vh;
overflow: hidden;
}
/* Set properties for the content */
.container .content {
grid-column: 1/2;
grid-row: 1/2;
background: white;
padding: 20px;
z-index: 1;
position: relative;
}
/* Set properties for the background */
.container .background {
grid-column: 1/3;
grid-row: 1/2;
transform: skewX(-12deg);
background: linear-gradient(110deg, #e0c3fc 0%, #8ec5fc 100%);
z-index: -1;
position: relative;
}
</style>
</head>
<body>
<!-- Create the container and the content and background divs -->
<div class="container">
<div class="content">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using CSS Grid</p>
</div>
<div class="background"></div>
</div>
</body>
</html>
Approach - 4: Using SVG
Algorithm
Create a div element with class "skewed-background" to contain the SVG element
Set the CSS properties for the "skewed-background" class to set its height, width, position, and overflow
Add an SVG element within the div with the viewBox attribute set to "0 0 500 100" and preserveAspectRatio set to "none"
Add a path element within the SVG element with the "d" attribute set to the coordinates of the four points of the skewed shape
Set the CSS properties for the "skewed-background svg" class to position the SVG element to the bottom left of the div element with 100% width and height
Set the CSS properties for the "skewed-background path" class to set the fill color of the path to #e0c3fc
Add a heading and paragraph element below the div to display some text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Skewed Background using SVG</title>
<style>
/* Style for the parent container */
.skewed-background {
height: 300px;
width: 100%;
position: relative;
overflow: hidden;
}
/* Style for the SVG element */
.skewed-background svg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
/* Style for the path element */
.skewed-background path {
fill: #e0c3fc;
}
</style>
</head>
<body>
<!-- The container for the SVG element -->
<div class="skewed-background">
<!-- The SVG element that creates the skewed background -->
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<!-- The path element that creates the skewed shape -->
<path d="M 0 0 L 500 0 L 500 100 L 0 50 Z" />
</svg>
</div>
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using SVG.</p>
</body>
</html>
Conclusion
However, it may be difficult to create more complex shapes using the clip-path method. The use of grid-gap and overflow properties can affect the layout and may need to be adjusted to achieve the desired result. Using SVG in this way can result in more code than the other methods and may affect performance.
1K+ Views
