How to make css folded-corner effect with transparent background?

Question

Someone can help me? I need to make the folded-corner to be transparent instead of solid color. You can see the picture below for your reference.

I have tried with these codes:

.back-ground
{
    background-image: url('http://pencil.my/assets/img/dashboard/bg.png');
    background-repeat: repeat;
    overflow-x: hidden;
}
.note {
    position: relative;
    width: 30px;
    padding: 1em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #97C02F;
    overflow: hidden;
    border-radius: 4px;
}

.note:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #658E15 #658E15;
    background: #658E15;
    display: block;
    width: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

<div class="back-ground">
 <div class="note">
    Sample note
 </div>
</div>

Answer 1

Something like this might work. Basically just create a ::before triangle with the border-color trick, rotate it using transform, and position it, along with the ::after element, at the top of the page:

body {
  padding: 2em;
}

.paper {
  height: 100%;
  min-height: 400px;
  background: #fff;
  position: relative;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  display: block;
}

.paper::before {
  top: -59px;
  border: 30px white solid;
  border-top-color: transparent;
  border-left-color: transparent;
  right: 0;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(88deg);
  z-index: 2;
  border-radius: 0% 0% 10%;
}

.paper::after {
  background: white;
  position: absolute;
  height: 57px;
  width: calc(100% - 60px);
  top: -57px;
}

.paper .content {
  padding: 0 2.5em;
  position: relative;
  top: -1em;
  z-index: 1;
  margin-top: 50px;
}


/*This is for the diagonal strip pattern on the background only */

body {
  background-color: gray;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
}

<div class="paper">
  <div class="content">
    This is the content of the paper
  </div>
</div>

Answer 2

I'm late for this question but after some searching and finding a couple of solutions this is what I end up using in one site.

    body {
      background-color: #234232
    }

    .box {
      width: 50%;
      height: 40%;
      margin: auto;
    }

    .fold-corner-card {
      margin: 2em;
      padding: 2em;
    }

    .fold-corner-card {
      background:
        -webkit-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -webkit-linear-gradient(45deg, #FFF, #FFF),
        -webkit-linear-gradient(135deg, #FFF, #FFF),
        -webkit-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -moz-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -moz-linear-gradient(45deg, #FFF, #FFF),
        -moz-linear-gradient(135deg, #FFF, #FFF),
        -moz-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -o-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -o-linear-gradient(45deg, #FFF, #FFF),
        -o-linear-gradient(135deg, #FFF, #FFF),
        -o-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        linear-gradient(45deg, #FFF, #FFF),
        linear-gradient(135deg, #FFF, #FFF),
        linear-gradient(225deg, transparent 25px, #FFF 10px);
    }

    .fold-corner-card {
      -webkit-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      -moz-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-position: 100% 0, 0 0, 100% 100%, 100% 0;
      background-repeat: no-repeat;
    }

<div class="box">
  <div class="fold-corner-card" style="position: relative;">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nisi dolor, at venenatis nisl viverra sed. Donec arcu felis, fermentum nec sapien vitae, gravida fringilla sapien. Nunc bibendum semper tristique. Curabitur non tempus augue. Vestibulum ut sapien lacus. Sed laoreet molestie est dignissim venenatis.</p>
  </div>
</div>