css - CSS 折纸效果

Question

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

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

编辑：

以下是我最终使用的样式，基于 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

你可以用（小提琴）做到这一点：

编辑：因为我今天早上心情很好，这里有另一个更接近你的例子的小提琴

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;    
}