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 */
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

Add below HTML to webpage

<div class="skew_container">
   <div class="skew_bg bg1">
      <div class="content">Background 1</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?
Join Devsheet Ask a Question