CSS: Page with Lifted Corners
A piece of paper laying flat with lifted, peeled or curled corners
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>
