CSS 折角效果

Posted 2020-07-16 Lisa lin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);
}

以上是关于CSS 折角效果的主要内容，如果未能解决你的问题，请参考以下文章