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>

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.

Was this helpful?