使用CSS折叠纸张效果

Question

我正在尝试实现折叠纸张效果，如附图所示：

我尝试了不同的组合：在我的包含不同边框的div之前，但我无法在我想要的方向上获得三角形。

修改

以下是我最终使用的样式，基于ExtPro的答案：

<div class="folded_menu">
  <div class="fold"></div>
  <div class="paper"></div>
</div>

.fold {
  position: absolute;
  left: -25px;
  top: 12px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 25px 90px 0;
  border-color: transparent #BCC7B6 transparent transparent;
}

.paper {
  padding: 1em;
  background: $nav-top; /* Old browsers */
  border: 2px solid white;
}

奖金问题：是否有可能在阴影上留下阴影？

Answer 1

您可以使用（fiddle）执行此操作：

编辑：因为我今天早上心情很好，所以another fiddle更接近你的榜样

HTML：

<div class='fold'></div><div class='paper'></div>

CSS：

body{
    background:grey;
}

.fold{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 30px 0;
    border-color: transparent #aeaeae transparent transparent;
    display:inline-block;    
}
.paper{
    height:50px;
    width:100px;
    background:white;
    display:inline-block;    
}