Double Slanted Header

double-slanted-header.markdown

Double Slanted Header

A Pen by Chris on CodePen.

License.

index.html

<header>
  <h1>
    My Code Pen
  </h1>
  <h2>
    Double Slanted Header
  </h2>
  <h3>
    Thanks for taking a look!
  </h3>
</header>

<div>
  <a target="blank" href="http://codepen.io/BadMoodTaylor/pen/KaLjzo">My CodePen for a Polygon Header using Clip</a>
  <p>Clip-Path is not very well supported though</p>
</div>

style.css

header{
  margin: 0; padding: 2em 5em 4em; color: #efefef;
  overflow:hidden;
  position: relative;
}

header::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  transform: skewY(-4deg);
  background: red;
  transform-origin: bottom left;
  z-index: -1;
}

header::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height: 100%;
  width:100%;
  transform: skewY(8deg);
  background: red;
  transform-origin: bottom right;
  z-index: -1;
}

body{margin:0; background: #efefef;}
div{padding: 4em;}

header{
  display: flex;
  flex-flow: column nowrap;
  }
header > h3 {align-self: flex-end;}