CSS 折角效果

效果1

 

.folded-corner{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    background: #58a; /* Fallback */
    background:
    linear-gradient(-135deg, transparent 2em, #58a 0);
}

 

效果二, 效果一的基础上加上以下样式

 

.fc-2{
　　background:
　　　　linear-gradient(to left bottom,
　　　　transparent 50%, rgba(0,0,0,.4) 0)
　　　　no-repeat 100% 0 / 2em 2em,
　　　　linear-gradient(-135deg, transparent 1.428em, #58a 0);
}

 

效果三    非45度角（效果一的样式加以下代码）

 

.fc-3,.fc-4{
　　position: relative;
　　background:
　　　　linear-gradient(-150deg, transparent 1.5em, #58a 0);
}

.fc-3:before,.fc-4:before{
　　content: '';
　　display: block;
　　position: absolute;
　　right: 0;
　　top: 0;
　　width: 1.73em;
　　height: 3em;
 　 background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat;
　　transform: translateY(-1.3em) rotate(-30deg);
　　transform-origin: bottom right;
}

 

效果四 效果三的基础上加上以下代码

 

.fc-4{
　　border-radius: 5px;
}

.fc-4:before{
　　border-bottom-left-radius: inherit;
　　background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
　　box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

 

更多参考链接http://www.w3cplus.com/css3/css-secrets/folded-corner-effect.html

转载于:https://www.cnblogs.com/lisa-lin/p/5541826.html