<section>
<div></div>
<div></div>
</section>
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
mix-blend-mode: screen;
}
body {
display: grid;
align-items: center;
justify-items: center;
height: 100vh;
margin: 0;
}
@media (max-width:500px){
section {
width: 90vw;
transform: scale(.9);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.