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

预备知识

  • CSS定位
  • CSS三角实现
  • CSS圆角及伪类,盒子阴影

在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;

效果图

CSS3实现精美的纸张折角效果_第1张图片

代码实现


<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="#">CRPERLINa>
    div>
body>
html>

你可能感兴趣的:(CSS3实现精美的纸张折角效果)