Chrome Extension

Create skew background using 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>

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.

Search history ×