纯CSS实现翘角纸片效果

昨天浏览网站时，偶然发现了网站上的翘脚纸片效果，之前见过很多次这种纸张两边翘起的效果，今天终于有时间了解以下这种效果的实现方法了。

网页上的效果

通过检查元素后发现，这种效果其实也是通过 box-shadow实现的，不过元素下面有专门用伪类实现的阴影层，然后通过 rotate变换即可达到这种效果。阴影层和内容层的关系可以由下图表示。

结构示意图

其中元素 #paper在上层， #paper:before和 #paper:after通过 z-index调整到下层，然后设置两个伪元素的阴影即可达到上图效果。
代码如下：

#paper {
    width: 200px;
    height: 50px;
    background-color: #fff;
    margin: auto;
    position: relative;
}
#paper:before,
#paper:after {
    content: '';
    width: 90px;
    height: 40px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: -1;
}
#paper:before {
    transform: rotate(-5deg);
    transform-origin: top right;
    left: 10px;
}
#paper:after {
    transform: rotate(5deg);
    transform-origin: top left;
    right: 10px;
}

以上代码在浏览器中的效果是这样的：

翘脚纸片效果

通过调整阴影层的各项阴影参数，就可以控制显示效果。值得注意的是，调整参数时千万不要让阴影层比内容层还大，不然阴影就露出马脚了哦！
当然还可以加一些小特技，比如给伪元素们加个动画：

#paper:before,
#paper:after {
    animation: shadow ease 2s infinite alternate;
}
@keyframes shadow {
    from {
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
    }
    to {
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
    }
}```
就变成了这样：
![动态效果](http://upload-images.jianshu.io/upload_images/3220260-79c48f3c7be41a48.gif?imageMogr2/auto-orient/strip)
还是蛮有趣的(^-^)。