Folded paper effect with CSS

Problem

I am trying to achieve the folded paper effect as shown in the attached image: enter image description here

I tried different combinations of :before on my containing div with different borders, but I can't get the triangle in the direction I want.

Edit:

Here are the styles I ended up using, based on ExtPro's answer:

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

Bonus question: is it possible to have the shadow on the fold as well?

Problem courtesy of: François Koessler

Solution

You can do this with (fiddle):

Edit: And because I'm in a good mood this morning, here's another fiddle closer to your example

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;    
}
Solution courtesy of: SW4

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.