CSS3折角效果代码
分类：实例代码
CSS3折角效果代码属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了折角效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.note {
position: relative;
display: inline-block;
vertical-align: top;
width: 15em;
padding: 2em;
margin: 0 1rem;
color: white;
font: 100%/1.6 Baskerville, Palatino, serif;
border-radius: .5em;
position: relative;
background: #58a;
background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #5588aa 0%);
border-radius: .5em;
}
.note::before {
content: '';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat;
width: 1.65507em;
height: 3.5493em;
transform: translateY(-1.89424em) rotate(-40deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
<div class="note"></div>
</body>
</html>
CSS3折角效果代码，这样的场景在实际项目中还是用的比较多的，关于CSS3折角效果代码就介绍到这了。