原理：
image.png
.book-box {
width: 250px;
margin: 0 auto;
position: relative;
/*box-shadow: 1px 0 2px rgba(0, 0, 0, 0.16);*/
}
.book-box:before,
.book-box:after {
z-index: -2;
/*content的z-index属性让内容浮在阴影之上,必不可缺,值越高级别越高，越在上面一层*/
content: "";
position: absolute;
/* -webkit-transform: rotate(-10deg);
transform: rotate(-10deg);*/
transform: skew(-15deg) rotate(-6deg);
/*把矩形的直角变成斜角（菱形）*/
-webkit-transform: skew(-15deg) rotate(-6deg);
bottom: 15px;
box-shadow: 0 16px 14px rgba(0, 0, 0, 0.5);
height: 20%;
/*定义隐藏的矩形宽度*/
left: 6.5px;
/*把矩阵往右推，避免露出来*/
max-width: 300px;
width: 50%;
/*定义隐藏的矩形长度*/
}
.book-box:after {
/*-webkit-transform: rotate(10deg);*/
/*transform: rotate(10deg);*/
transform: skew(15deg) rotate(6deg);
-webkit-transform: skew(15deg) rotate(6deg);
left: auto;
right: 6.5px;
/*把矩阵往左推，避免露出来*/
}
.book-box .book {
position: relative;
font-size: 13px;
text-align: center;
background: #fff;
padding: 10px;
/*为照片扩容避免暴露底下的模块露馅*/
}
<div class="book-box">
<img class="book" src="http://download.broadview.com.cn/SmallCover/1801792ef1408254f32e">
</img>
</div>
