CSS Lifted/Curled/Peeled Corners (Cascading Style Sheets)

It is possible to have a corner or, in this example, corners of a page appear to be lifting off the object they are sitting on. Most of the magic happens when the transformation rotate() is applied. Remove the z-index: -1; line when making adjustments.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Curled/Peeled Corners using CSS</title>
	<style>
		body {
			background: #f8f8f8;
		}
		.page {
			position: relative;
			background: #fff;
			margin: 100px;
			padding: 100px;
			width: 300px;
			box-shadow: 0 25px 25px -35px rgba(0,0,0,0.25); /* this just adds a touch of shadow to the bottom of the page */
		}
			.page::before,
			.page::after {
				content: "";
				position: absolute;
				top: 90%; /* may have to change the top for a taller page */
				bottom: 13px; /* may have to change the bottom for a taller page */
				box-shadow: 0 10px 15px rgba(0,0,0,0.25); /* this is for the curled page corners */
				z-index: -1;
			}
			/* left bottom corner shadow */
			.page::before {
				left: 5px;
				right: 50px;
				transform: rotate(-3deg); /* may have to change the degrees rotated for a wider page */
			}
			/* right bottom corner shadow */
			.page::after {
				left: 50px;
				right: 5px;
				transform: rotate(3deg); /* may have to change the degrees rotated for a wider page */
			}
	</style>
</head>
<body>
	<div class="page"></div>
</body>
</html>

The top, bottom, and degrees of rotation need to be changed when increasing or decreasing the size of .page.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Curled/Peeled Corners using CSS</title>
	<style>
		body {
			background: #f8f8f8;
		}
		.page {
			position: relative;
			background: #fff;
			margin: 100px;
			width: 1000px;
			height: 500px;
			box-shadow: 0 25px 25px -35px rgba(0,0,0,0.25); /* this just adds a touch of shadow to the bottom of the page */
		}
			.page::before,
			.page::after {
				content: "";
				position: absolute;
				top: 90%; /* may have to change the top for a taller page */
				bottom: 25px; /* may have to change the bottom for a taller page */
				box-shadow: 0 10px 15px rgba(0,0,0,0.25); /* this is for the curled page corners */
				z-index: -1;
			}
			/* left bottom corner shadow */
			.page::before {
				left: 5px;
				right: 50px;
				transform: rotate(-2deg); /* may have to change the degrees rotated for a wider page */
			}
			/* right bottom corner shadow */
			.page::after {
				left: 50px;
				right: 5px;
				transform: rotate(2deg); /* may have to change the degrees rotated for a wider page */
			}
	</style>
</head>
<body>
	<div class="page"></div>
</body>
</html>