On gists

Non-Rectangular Headers (Tilt / Trapezoidal)

Popular ⭐ CSS CSS trick

demo1.html Raw #

<!--
  SVG
  https://codepen.io/erikdkennedy/pen/ygpwZg?editors=1100
-->
<header>
  <h1>Header Content</h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="red" points="0,100 100,0 100,100"/>
  </svg>
</header>

<section>
  <h1>Section Content</h1>
</section>

demo1.css Raw #

header {
  position: relative;
  height: 300px;
  background-image: linear-gradient(#ff9d2f, #ff6126);
}

h1 {
  padding: 100px 0;
  font: 44px "Arial";
  text-align: center;
}

header h1 {
  color: white;
}

svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  border: 1Px solid red;
  /* set height to pixels if you want angle to change with screen width */
}

demo2.html Raw #

<!--
  clip-path
  https://jsbin.com/vivofiheku/edit?html,css,output
-->
<header>
  <h1>Header Content</h1>
</header>

<section>
  <h1>Section Content</h1>
</section>

demo2.css Raw #

header {
  position: relative;
  height: 300px;
  background-image: linear-gradient(#ff9d2f, #ff6126);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 30px)
  );
  /* change the calc height to a percentage height to get alternate responsive behavior*/
}

h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
  color: white;
  text-align: center;
}

section {
	margin-top: -30px; /* same height like clip-path on the end */
  background-image: linear-gradient(135deg, #777, #111);
}

demo3.html Raw #

<!--
  skew
  https://jsbin.com/sogamuqoxa/edit?html,css,output
-->

<header>
  <div class="header__bg"></div>
  <h1>Header Content</h1>
</header>

<section>
  <h1>Section Content</h1>
</section>

demo3.css Raw #

header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.header__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#ff9d2f, #ff6126);
  transform: skewY(-6deg);
  transform-origin: top left;
	
}


h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
  text-align: center;
}

header h1 {
  position: relative;
  color: white;
}

article.html Raw #

https://css-tricks.com/creating-non-rectangular-headers/