css
Create skew background using CSS
In this post, we will see how to create a skewed background effect using just CSS.
.skew_container {
max-width: 500px;
margin: 50px auto;
overflow: hidden;
padding-bottom: 4%;
}
.skew_container .skew_bg {
height: 260px;
background: #115edb;
text-align: center;
padding-top: 130px;
margin-top: -9%;
transform: skew(0deg, 10deg); /*THIS WILL DO THE MAGIC*/
}
.skew_container .skew_bg .content {
color: #fff;
font-size: 30px;
transform: skew(0deg, -10deg); /* MAKE CONTENT HORIZENTAL */
}
Add below HTML to webpage
<div class="skew_container">
<div class="skew_bg bg1">
<div class="content">Background 1</div>
</div>
</div>
<div class="skew_container">
<div class="skew_bg bg2">
<div class="content">Background 2</div>
</div>
</div>
You can create skew backgrounds using CSS. CSS property 'transform' is used to make the background skew from its position. It will change the sides skewed from its position.
Was this helpful?
Similar Posts
- Add image to background using CSS
- Remove chrome browser autofill background color CSS
- Remove (WebKit) Chrome browser autofill background color CSS
- Create rounded shape style button using CSS
- Create a simple Vertical menu using CSS Example 1
- Create a Login modal popup using HTML and CSS
- Change Last element style using CSS