书页效果

最新推荐文章于 2023-01-06 14:09:42 发布

weixin_33972649

最新推荐文章于 2023-01-06 14:09:42 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000005990441

<!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>