<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书页效果</title>
</head>
<style>
.book {
position: relative;
width: 200px;
height: 248px;
margin-left: 20px;
border: 1px #eee solid;
background-color: #fff;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)
}
.book::after {
position: absolute;
content: '';
bottom: 10px;
left: 35px;
width: 50%;
height: 50%;
-webkit-transform: skew(-30deg) rotate(-6deg);
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: -1
}
.book::before {
position: absolute;
content: '';
bottom: 10px;
right: 35px;
width: 50%;
height: 50%;
-webkit-transform: skew(30deg) rotate(6deg);
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: -1
}
</style>
<body>
<div class='book'>
</div>
</body>
</html>
