css折角效果

下面介绍一种比较主流的折角效果

7B3E.tm.png

 main{
        position:relative;
        background:#58a;
        background:linear-gradient(-150deg,transparent 1.5em,#58a 0);
        border-radius:.5em;
        height:100px;
        width:200px;
    }
    main:before{
        content:'';
        position:absolute;
        top:0;
        right:0;
        background:linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat;
        width:1.73em;
        height:3em;
        transform:translateY(-1.3em) rotate(-30deg);
        transform-origin:bottom right;
        border-bottom-left-radius:inherit;
        box-shadow:-.2em .2em .3em -.1em rgba(0,0,0,.15);
    }