下面介绍一种比较主流的折角效果
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);
}
