A CodePen by Joost Kiens. CSS Page curl - CSS Page curl with one div.

index.html

<div class="curl"></div>

<h1>CSS Page Curl</h1>
<p>hover over page curl to resize</p>

style.css

/**
 * Author: @joostkiens
 * Licensed under the MIT license
 */
body {
	background: steelblue;
}
.curl {
	width:120px;
	height:120px;
	position: absolute;
	top:0;
	left:0;
	background : 
		linear-gradient(
			135deg, 
			#fff, 
			#f3f3f3 45%, 
			#ddd 50%, 
			#aaa 50%, 
			#bbb 56%, 
			#ccc 62%, 
			#f3f3f3 80%,
			#fff 100%
		);
	box-shadow : 0 0 10px rgba(0, 0, 0, .5);
	transition: all .5s ease;
}
.curl:before,
.curl:after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 12.5%;
	bottom: 5.8%;
	width: 70%;
	max-width: 300px;
	max-height: 100px;
	height: 55%;
	box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
	transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
	left: auto;
	right: 5.8%;
	bottom: auto;
	top: 14.16%;
	transform: skew(-15deg) rotate(-84deg);
}

.curl:hover {
	width: 240px;
	height: 240px;
}
.curl:hover:before,
.curl:hover:after {
	box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}
h1 {
  text-align: center;
  font-size: 8em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  color: white;
  margin: 0.5em 0 0.25em;
  padding: 0;
}
p {
  text-align: center;
  font-weight: bold;
  color: lightblue;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}