[html] view plain copy
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码：
[css] view plain copy
.dog-eared-tip{
padding: 7.5px 5px 7.5px 20px
background: #DEAA2F
font-size: 13px
position: absolute
text-align: center
width: 100%
color: black
}
.dog-eared_tip:before, .work_tip:after {
content: ""
position: absolute
z-index: -2
-moz-transform: rotate(-3deg)
-webkit-transform: rotate(-3deg)
-o-transform: rotate(-3deg)
-ms-transform: rotate(-3deg)
transform: rotate(-3deg)
bottom: 15px
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7)
height: 50%
left: 10px
max-height: 100px
max-width: 300px
width: 50%
}
.dog-eared_tip:after {
-moz-transform: rotate(3deg)
-webkit-transform: rotate(3deg)
-o-transform: rotate(3deg)
-ms-transform: rotate(3deg)
transform: rotate(3deg)
left: auto
right: 10px
}
上面的代码首先设置了div的常用样式如底色、字体、居中、边距等。
然后为该div的:before和:after伪元素设置框阴影（box-shadow）和小角度旋转（rotate方法），
并把before和after的位置放在div的底部，并且z序列为负数，这样的实际效果就是伪元素本身被div所遮挡，但是刚好使得其外围阴影部分露出底部。
注意，这里请记得不要给div设置overflow不可见的样式，否则阴影不可见。
基本上好了，还差最后一步，两边阴影的倾斜度在物理学上是对称的，所以我们还需要调整一下:after伪元素的倾斜角度（-3°调整为3°）。
这样:before对应于标签的左下边角，:after对应于标签的右下边角的卷曲阴影。
本例在IE11/Chrome/FF/Edge下可以工作。
你还可以使用CSS3中的伪类:hover和transition属性，在本例基础上添加鼠标悬停效果，
也就是当用户悬停在书页上时，呈现卷角被缓缓抚平的效果，我们把这个称之为“会呼吸的纸”。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #eaf0f2
}
h1{text-align: center}
.box{width:500pxheight:300pxmargin:0 autoposition:relative}
.img-layer{position: absolutewidth: 500pxheight: 300pxtop: 0left: 0overflow: hidden}
.img-layer img {width: 500pxcursor: pointer}
.img-layer:before{ content: ''
position: absolute
top: 0
right: 0
width: 0
height: 0
border-style: solid
border-width: 0
border-color: rgba(0,0,0,0.2) #fff
border-radius: 0 0 0 4px
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2)
-webkit-transition: all 0.4s ease-out
transition:all 0.4s ease-out}
.img-layer:hover:before{
border-right-width:100px
border-bottom-width:100px
}
</style>
</head>
<body>
<h1>折角效果</h1>
<div class="box">
<div class="img-layer">
<img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
</div>
</div>
</body>
</html>
来源于网络
上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景
直角切角
先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。
注：background: #58a不是必须的，加上它是为了将其作为回退机制。
实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。
依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。
好了，现在实现了。如果要四个角的话，就要四层渐变了。
就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！
