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

回复

我来回复
  • 暂无回复内容