css 實現的紙張卷曲效果

html

   <div class="page-wrap">
        <div class="page-inner">
            <h1>標題標題</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio exercitationem odit aperiam totam alias, nemo veniam magni asperiores repudiandae commodi dignissimos incidunt est enim soluta reiciendis corporis aliquid quae sit.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quidem perferendis nesciunt ea temporibus tempore molestias, sunt non recusandae maiores nostrum necessitatibus voluptas dignissimos earum quisquam blanditiis cum iusto asperiores!</p>
        </div>
    </div>

css

 *{margin:0;box-sizing:border-box;}
        body{
            padding:50px 0;
            background: #eee;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 20px;
        }
        .page-wrap,.page-inner{
            margin:0 auto;
            width:600px;
            padding:50px 0 0 60px;
            background:#fff;
            /* border-radius: 20px; */
            text-align: justify;
        }
        .page-inner{
            padding:0 60px 40px 0;
        }
        .page-wrap{
            position: relative;
            /* 高斯模糊，過濾器 */
            filter:drop-shadow(0px 0px 15px #bbb);
        }
        .page-wrap:before{
            content:'';
            display: block;
            position: absolute;
            right:-60px;
            top:0;
            width:60px;
            height:50px;
            background: linear-gradient(42deg,#ddd 30%,rgba(0,0,0,0) 40%)
        }
        h1{
            margin-bottom: 20px;text-align:center;
        }
        p{
            text-indent: 2em;margin-bottom: 5px;
        }

效果圖