<div id=wrapper>
	<input type=checkbox> 
	<div id=menu><i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	</div>
	<div id=page></div>
</div>

#page{
	width: 100%; height: 100%;
	background: url('photo-1517142089942-ba376ce32a2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') #0b674c center/cover; 
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 
	transition: all .3s linear; 

}

input[type="checkbox"] { /* menu control */
	width: 30px; height: 30px; z-index: 1; margin: 0; outline: none; border: none;
	appearance: initial; -webkit-appearance: initial; -moz-appearance:initial; 
	border-top-left-radius: 10px;
}

input::after { /* menu icon */
	display: block; content: '\2255'; 
	font: bold 20pt/35px 'georgia'; text-indent: 10px; 
	border-top-left-radius: 10px; 
	transition-delay: .25s;
} 

input:checked ~ #page { /* when menu is open, transform the page */
	transform: translateX(40%) rotateY(10deg) scale(0.8)  ; transform-origin: right center;
	transition: all .3s linear; 
	clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
}

input:checked::after { content: '\00d7'; color: #ebebeb; background: #04271d; transition-delay: -.1s;} 


#menu, #page, input{ position: absolute; }

#wrapper {
	width: 80vw; height: 500px; position: relative;
	margin: auto; margin-top: 50px;
	box-shadow: 0 0 20px lightgrey; border-radius: 10px; 
	background: linear-gradient(45deg, black, #0b674c); 
	overflow: hidden;
}

#menu {
	width: 600px; 
	margin: 45px 10px 10px 45px; 
}

i {
	display: inline-block;
	width: 45px; height: 45px;
	background-color: #d7e59f;
	margin: 30px; 
	border-radius: 50%;
} 

@media (max-width: 1200px){
	#wrapper{ height: 50vw; }
	#menu {width: 35vw;} 
	i{width: 2vw; height: 2vw; margin: 2.5vw;}
}

document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input'))=>{ 
	if(checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
});