<section></section>
<section></section>
<section></section>
<section></section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-image: url(http://lorempixel.com/y/1000/1000);
background-attachment: fixed;
}
section {
height: 100vh;
background-color: hsla(0,75%,50%,.4);
transform-origin: 0% 0%;
background-attachment: fixed;
}
section:nth-child(1) {
transform: skew(0,-10deg);
background-image:
linear-gradient(
hsla(0,75%,50%,.4),
hsla(0,100%,50%,.6)
),
url(http://lorempixel.com/i/1000/1000);
}
section:nth-child(2) {
transform-origin: 100% 0%;
transform: skew(0,10deg);
background-color: hsla(110,75%,50%,.4);
background-image:
linear-gradient(
hsla(110,75%,50%,.4),
hsla(110,100%,50%,.6)
),
url(http://lorempixel.com/s/1000/1000);
}
section:nth-child(3) {
transform: skew(0,-10deg);
background-color: hsla(45,75%,50%,.4);
background-image:
linear-gradient(
hsla(45,75%,50%,.4),
hsla(45,100%,50%,.6)
),
url(http://lorempixel.com/a/1000/1000);
}
section:nth-child(4) {
transform-origin: 100% 0%;
transform: skew(0,10deg);
background-color: hsla(210,75%,50%,.4);
background-image:
linear-gradient(
hsla(210,75%,50%,.4),
hsla(210,100%,50%,.6)
),
url(http://lorempixel.com/t/1000/1000);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.