<div></div>

div {
	--gt: linear-gradient(black, black);
	--n: 100px;
	--h: calc(var(--n) - 5px);

	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(--h), 90% var(--h), 70% var(--h), 40% var(--h),
    10% var(--h);
}

body  {
	display: grid;
	align-items: center;
	justify-items: center;
	height: 100vh;
	margin: 0;
}
@media (max-width:500px){
	div {
		width: 90vw;
		transform: scale(.9);
	}
}