Create skew background using CSS

css Share on :

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>

Live Demo

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.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer