<div></div>
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
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,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n),
10% var(--n);
}
body {
display: grid;
align-items: center;
justify-items: center;
height: 100vh;
margin: 0;
}
@media (max-width:500px){
div {
width: 90vw;
transform: scale(.9);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.