css3折角效果代码实例
分类：实例代码
分享一段代码实例，它使用三种不同的方式实现了折角效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.box {
width: 400px;
height: 300px;
margin-bottom: 30px;
background: #58a;
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.4em, #58a 0);
}
.pox {
width: 400px;
height: 300px;
margin-bottom: 30px;
background: #58a;
background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 3em 1.73em,
linear-gradient(-150deg, transparent 1.5em, #58a 0);
}
.note {
width: 400px;
height: 300px;
background: #58a;
position: relative;
border-radius: 5px;
background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
}
.note:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1.73em;
height: 3em;
background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0,rgba(0,0,0,.4) 100%);
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);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="pox"></div>
<div class="note"></div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu