<div class='page'></div>

@import 'compass/css3';

$b: 2em;
$c: 6.25em;
$a: 45deg;
$h: $c/cos($a);
$c1: $h*sin($a);

html {
	height: 100%;
	background: url(https://images.unsplash.com/photo-1570475735025-6cd1cd5c779d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover #aaa;
	background-blend-mode: overlay
}

.page {
	position: relative;
	margin: 3.5em auto;
	border: solid 2em transparent;
	width: 80%; height: 70vh;
	max-width: 37.5em;
	background: #fff padding-box;
	clip-path: 
		polygon(0 $c1, $c 0, 
						calc(100% - #{$c}) 0, 100% $c1, 
						100% 100%, 0 100%);
	filter: drop-shadow(0 1px 3.5px rgba(#000, .2));
	
	&::before, &::after {
		--i: 0;
		--sgni: calc(2*var(--i) - 1);
		position: absolute;
		top: -$b;
		left: calc(var(--i)*100% + var(--sgni)*#{$b} - .5*#{$h});
		width: $h; height: .5em;
		transform-origin: 50% 0;
		transform: 
			rotate(calc(var(--sgni)*#{$a}))
			translatey($c*$c1/$h);
		background: 
			radial-gradient(#{at 50% 0}, rgba(#000, .2), transparent 65%);
		content: ''
	}
	
	&::after { --i: 1 }
}