CSS3知识之折角效果

CSS3折角效果：可兼容不同背景

CSS3知识之折角效果

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3知识之折角效果</title>
    <style>
        *{margin: 0; padding: 0;}
        body { background-color: #f0f0f0 }
        div  { width: 220px; height: 280px; margin: 60px; position: relative; float: left; }

        /*div1样式*/
        .div1{ background: linear-gradient( -135deg, transparent 2em, #35b091 0 ); }
        .div1:after{
            content: ''; position: absolute; right: 0; top: 0; width: 2.857em; height: 2.857em;
            background: linear-gradient( -135deg, transparent 2em, #267D67 0 );    }

        /*div2样式*/
        .div2{ background: linear-gradient( -150deg, transparent 2em, #35b091 0 ); }
        .div2:after{
            content: ''; position: absolute; right: 0; top: 0; width: 4em; height: 2.309em;
            background: linear-gradient( -150deg, transparent 2em, #267D67 0 );    }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

CSS3知识之折角效果