<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 }
}