CSS3折角效果:可兼容不同背景
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3知识之折角效果</title>
<style>
*{margin: 0; padding: 0;}
body { background-color: #f0f0f0 }
div { width: 220px; height: 280px; margin: 60px; position: relative; float: left; }
/*div1样式*/
.div1{ background: linear-gradient( -135deg, transparent 2em, #35b091 0 ); }
.div1:after{
content: ''; position: absolute; right: 0; top: 0; width: 2.857em; height: 2.857em;
background: linear-gradient( -135deg, transparent 2em, #267D67 0 ); }
/*div2样式*/
.div2{ background: linear-gradient( -150deg, transparent 2em, #35b091 0 ); }
.div2:after{
content: ''; position: absolute; right: 0; top: 0; width: 4em; height: 2.309em;
background: linear-gradient( -150deg, transparent 2em, #267D67 0 ); }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>