原理：
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屬性讓內(nèi)容浮在陰影之上,必不可缺,值越高級別越高饵婆，越在上面一層*/
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>
