[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属性，在本例基础上添加鼠标悬停效果，
也就是当用户悬停在书页上时，呈现卷角被缓缓抚平的效果，我们把这个称之为“会呼吸的纸”。
通常情况li上加float:left是为了让标签并排显示，如果不加的话默认就是换行的而上面加position:
relative
left:
-50%这个可能是写代码的人想让每个标签都向左移动一半的位置，有点像是书页或者纸张层叠的效果，也许可以不用相对定位来处理，可以加例如margin-left:-100px一样可以达到效果，只不过这样需要把li的宽度固定，要不然就效果不太好了
再来说一下让标签居中的样式好了，其实上面加的
有点问题，加了position:
relative
left:
50%就没必要加
float:left
了而且应该是无效的
还有就是position:
relative
left:
50%并不能达到真正居中的效果，因为这样加只是以标签的左边线为中心，实质效果是标签是偏右的，如果非要让标签用position来实现居中的话，那么就应该是下面这种样式，例如：
你把这段标签直接放入body中试试就能看到了，div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中，还是使用常用方法吧margin:0
auto，尽量少用position属性来设定，
