CSS の歪んだ影の実装コード

<ul class="box">
    <li><img src="......" alt=""></li>
    <li><img src="......" alt=""></li>
    <li><img src="......" alt=""></li>
</ul>

ul、li {
    リストスタイル:なし;
}
。箱 {
    幅: 980ピクセル;
    高さ: 自動;
    クリア: 両方;
    オーバーフロー: 非表示;
    マージン: 20px 自動;
}
.box li {
    幅: 300ピクセル;
    高さ: 210px;
    位置: 相対的;
    背景: #fff;
    フロート: 左;
    マージン: 20px 10px;
    境界線: 2px 実線 #efefef;
    ボックスシャドウ: 0 1px 4px rgba(0, 0, 0, .27), 0 0 60px rgba(0, 0, 0, 0.1) インセット;
}
.box li img {
    表示: ブロック;
    幅: 290ピクセル;
    高さ: 200px;
    マージン: 5px;
}
.box li:before、.box li:after {
    コンテンツ： '';
    位置: 絶対;
    Zインデックス: -2;
    幅: 80%;
    高さ: 80%;
    下: 8px;
    背景: 透明;
    ボックスの影: 0 8px 26px rgba(0, 0, 0, 0.6);
}
.box li:before {
    左：7％
    変換: skewX(-12deg) 回転(-4deg);
}
.box li:after {
    右：7%
    変換: skewX(12度) 回転(4度);
}