Do you need to create a slanted div for your website? Well you’ve come to the right place!

We are going to create a slanted Div using CSS only without the use of images as this would be a waste of resources! We are going to use pseudo elements, applying a CSS3 transform on them, skewing the whole element and hiding the overlapping areas. Here is the code:-

HTML

<div class="container">

  <main class="main">
    <div class="main-container">
      <section>
        <h1>Silva Web Designs</h1>
        <p>Okay, so I guess this is a good way to make a slanted div aye? I am also responsive which is pretty cool. Instead of using a background colour you can use a background image instead which works very nicely. The possibilities are endless! :)</p>
        </section>
    </div>
   </main>

</div>

CSS

.container {
  padding-top: 60px;
}

.main-container {
  background: #169fe6;
  position: relative;
  color: #FFFFFF;
}

.main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 72px;
  background: #169fe6;
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  -webkit-backface-visibility: hidden;
}

section {
  margin: 10px 0;
  padding: 0 20px;
  padding-bottom: 10px;
  position: relative;
}

And there you have it, I hope this helps! 🙂