<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);
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.