Replicating something in simple CSS

Live code here

I was using this property to give it tilt like this.

transform: skewY(-6deg);
  transform-origin: top left;

Is there a way we can handle it through some Pseudo elemnt technique.

I may be willing to replicate like this →

Like this I guess?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
}
header {
	position: relative;
}
h1 {
	margin:0;
}
header:before {
	content:"";
	position: absolute;
	top: 0;
	bottom: 50%;
	right: 0;
	left: 0;
	z-index:-1;
	background-image: linear-gradient(#ff9d2f, #ff6126);
	transform: skewY(-6deg);
	transform-origin: top left;
}
</style>
</head>

<body>
<header>
  <h1>Header Content</h1>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
  <p>Some content</p>
</header>
</body>
</html>

You can find a number of methods here.

You can probably also do it with a linear gradient depending on use.

2 Likes