CSS3实现精美的纸张折角效果

来源：互联网发布：java能干嘛编辑：程序博客网时间：2024/05/17 17:55
预备知识

CSS定位
CSS三角实现
CSS圆角及伪类,盒子阴影
在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;
效果图

这里写图片描述
代码实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3实现折角效果</title>    <style media="screen">        .wrapper{        margin:0 auto;        width:500px;        height:300px;        background-color: #36b11d;        border-radius: 10px;        font-family: monoca,"微软雅黑",sans-serif;        /*父包含块*/        position: relative;        }        .wrapper > p{            width:400px;            height:200px;            display: block;            color:#f5f5f5;            font-size:14px;            /*文字换行*/            word-wrap: break-word;            word-break: break-all;            /*内容块绝对居中*/            position: absolute;            top:50%;            left:50%;            -webkit-transform: translate(-50%,-50%);                -ms-transform: translate(-50%,-50%);                    transform: translate(-50%,-50%);            /*文字增加阴影稍微有立体感一些*/            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);            overflow: hidden;        }        .wrapper::before{            /*设置折角实现的位置;*/            position: absolute;            left:0;            bottom: 0;            width:0;            content:"";            display: block;            border: 30px solid #7201aa;            border-color:rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent;            background-color: #fff; //设置为透明的话,会显示绿底;            /*设置元素的阴影效果*/            box-shadow:1px -2px 1px rgba(0, 0, 0, 0.5) ;        }        .wrapper::after{            /*设置折角实现的位置;*/            position: absolute;            right:0;            bottom: 0;            width:0;            content:"";            display: block;            /*通过调整大小来控制折角的大小*/            border: 60px solid #7201aa;            border-color:rgba(0, 255, 0, 0.2) transparent transparent rgba(0, 220, 0, 0.2) ;            background-color: #fff; //设置为透明的话,会显示绿底;            /*设置元素的阴影效果*/            box-shadow:-2px -3px 1px rgba(0, 0, 0, 0.5) ;        }        /*名字定位*/        .wrapper>a{            display: block;            width:50px;            line-height: 50px;            text-align: center;            font-size:15px;            color:#2b2b2b;            text-decoration: none;            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); inset ;            -webkit-transform: rotate(-45deg); inset ;                -ms-transform: rotate(-45deg); inset ;                    transform: rotate(-45deg);            position: absolute;            right:70px;            bottom: 50px;            z-index: 50;        }    </style></head><body>    <div class="wrapper">        <p>            Lorem ipsum dolor sit amet, consectetur adipisicing elit,            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate               velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,                sunt in culpa qui officia deserunt mollit anim id est laborum.        </p>        <a href="#">CRPERLIN</a>    </div></body></html>
0 0