Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created February 24, 2017 23:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/93712b6f177d75217e795a8a4f6f8f2d to your computer and use it in GitHub Desktop.
Save CodeMyUI/93712b6f177d75217e795a8a4f6f8f2d to your computer and use it in GitHub Desktop.
Polygon Header
<header>
<h1>
My Code Pen
</h1>
<h2>
Polygon Header
</h2>
</header>
<div>
*Clip-Path has very Limited Support. If you see horizontal header then browser not supported
</div>
header{
background: red; margin: 0; padding: 2em 2em 10em; color:white;
text-align:center;
clip-path: polygon(
0 0,
200% -350%,
80% 100%,
0 30%
);
}
div{font-size: 0.8rem; padding: 2em;}
body{margin:0;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment