Responsive slanted divs with CSS

index.html

  
  <header class="header" id="header">
    <div class="skew">
        <div class="header-inner">
          <h1 class="logo">
            <a href="/">Logo</a></h1>
        </div>
    </div>
  </header>


<div class="container">

  <main class="main">
    <div class="main-container
  ">
      <section>
        <h1>Content</h1>
        <p>Oh God, my uncle. How am I ever gonna explain this? What?! In my experience, there is no such thing as luck. Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. </p>
        </section>
    </div>
   </main>

</div>

Responsive-slanted-divs-with-CSS.markdown

Responsive slanted divs with CSS

No background images or css triangles technique for responsive slanted divs.

A Pen by Larry Naman on CodePen.

License.

style.css

body {
  padding: 0em 6em;
}

.header {
  z-index: 1;
  position: relative;
}

.header .skew:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  width: 100%;
  height: 250px;
  background: #e7e7e7;
  z-index: -1;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
}

.header .skew .header-inner {
  max-width: 850px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  margin: 0;
}

.container {
  padding-top: 60px;
}

.main-container {
background: #e7e7e7;
position: relative;

}

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

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