伪元素实现纸张卷角效果

先上效果图:

       主要是使用了伪元素：before和：after，伪元素虽然是不存在的，但是它表现的就跟普通元素是一样的，可以调整大小、背景等。

实现步骤:
1.新建一个div，即图中的白色“纸张”

<div class="box effect">
</div>

2.利用伪类创建两个灰色的方块，并倾斜，且为它设置阴影：

.effect:before, .effect:after
{
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

 注意：伪元素一定要有content这个属性值，即使content为空。

3.将两个方块的z-index设置为-1.让白色的“纸”挡住它们，露出的就是效果。

demo戳这里：http://jsbin.com/nidixiqovi/1/edit