Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created February 24, 2017 23:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/eea2b1da7a6984dffbe60b6bf4fcfc66 to your computer and use it in GitHub Desktop.
Save CodeMyUI/eea2b1da7a6984dffbe60b6bf4fcfc66 to your computer and use it in GitHub Desktop.
Simple Slanted Header
<header>
<h1>
My Code Pen
</h1>
<h2>
Simple Slanted Header
</h2>
</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>
<div>
<a target="blank" href="https://codepen.io/BadMoodTaylor/pen/mRYZaM">My CodePen for a Double Slanted Header using both before and after</a>
</div>
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;
}
body{margin:0; background: #efefef;}
div{padding: 4em 4em 0;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment