CSS folded corner effect transparent background

I have this Code for folded corner using CSS:

body {
  background-color: #e1e1e1
}
.note {
  position: relative;
  width: 480px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}
.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  /* This trick side-steps a webkit bug */
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  /* A bit more verbose to work with .rounded too */
  background: #658E15;
  /* For when also applying a border-radius */
  display: block;
  width: 0;
  /* Only for Firefox 3.0 damage limitation */
  /* Optional: shadow */
  -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);
}
.note.red {
  background: #C93213;
}
.note.red:before {
  border-color: #fff #fff #97010A #97010A;
  background: #97010A;
}
.note.blue {
  background: #53A3B4;
}
.note.blue:before {
  border-color: #fff #fff transparent transparent;
  background: transparent;
}
.note.taupe {
  background: #999868;
}
.note.taupe:before {
  border-color: #fff #fff #BDBB8B #BDBB8B;
  background: #BDBB8B;
}

<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Now, in really action this worked but in top corner I see white background. how do remove white background and replace with transparent.

DEMO HERE

Solution

The only way transparency can be achieved (or mimicked) using the current approach would be to set border-color as the same as the page's background-color. This is because the code is using the border trick to create the folded effect. However, this approach is not very useful when the page background is an image or a gradient in itself (basically, not a solid color).

In such scenarios, this effect can be created using a combination of linear-gradient background like in the below snippet. Here, a combination of three linear-gradient are used and they are as follows:

One linear gradient (angled towards bottom left) to produce the folded effect. This gradient has a fixed 16px by 16px size. (Note: We can move this linear gradient to a pseudo-element like in the box-shadow version at the bottom of this answer but retaining it in the parent leaves one pseudo-element for some other use.)
One linear gradient to provide a solid color to the left of the triangle that causes the folded effect. We are using a gradient even though it produces a solid color because we can control the size of background only when images or gradients are used. This gradient is positioned at -16px on X-axis (basically meaning it would end before the place where the folded triangle is present).
Another gradient similar to the above which again produces a solid color but is positioned at 16px down on the Y-axis (again to leave out the area occupied by the folded triangle).

This is very complex but it can be responsive, can support multiple colors and non solid backgrounds also. To use different colors for the container or folded area, just modify the colors of the gradient. The first one forms the folded area and the rest forms the color of the container.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: linear-gradient(to bottom left, transparent 50%, #658E15 50%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Just for demo */

.note {
  transition: all 1s;
}
.note:hover {
  width: 480px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Only for illustration:

In the below snippet, I have given each gradient a different color to illustrate how the whole effect is actually achieved.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: linear-gradient(to bottom left, transparent 50%, aqua 50%), linear-gradient(to right, chocolate 99.9%, transparent 99.9%), linear-gradient(to right, beige 99.9%, transparent 99.9%);
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Just for demo */

.note {
  transition: all 1s;
}
.note:hover {
  width: 480px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Multiple Themes:

Here is a version with sample for all themes (colors) that are provided in the question.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}

.note{
  background-image: linear-gradient(to bottom left, transparent 50%, #658E15 50%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
}
.note.red{
  background-image: linear-gradient(to bottom left, transparent 50%, #97010A 50%), linear-gradient(to right, #C93213 99.9%, transparent 99.9%), linear-gradient(to right, #C93213 99.9%, transparent 99.9%);
}
.note.blue{
  background-image: linear-gradient(to bottom left, transparent 50%, #53A3E7 50%), linear-gradient(to right, #53A3B4 99.9%, transparent 99.9%), linear-gradient(to right, #53A3B4   99.9%, transparent 99.9%);
}
.note.taupe{
  background-image: linear-gradient(to bottom left, transparent 50%, #BDBB8B 50%), linear-gradient(to right, #999868 99.9%, transparent 99.9%), linear-gradient(to right, #999868 99.9%, transparent 99.9%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="note red">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="note blue">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="note taupe">
  <p>Lorem ipsum dolor sit amet </p>
</div>

With box-shadow:

If box-shadow effect on the folded area is also required, we can move the first gradient (the one that creates the folded corner) into a separate pseudo-element (:before) and add box-shadow to it.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background-position: -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.note:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  top: 0px;
  right: 0px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.note:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #658E15 50%)
}
.note {
  background-image: linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
}
.note.red:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #97010A 50%)
}
.note.red {
  background-image: linear-gradient(to right, #C93213 99.9%, transparent 99.9%), linear-gradient(to right, #C93213 99.9%, transparent 99.9%);
}
.note.blue:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #53A3E7 50%)
}
.note.blue {
  background-image: linear-gradient(to right, #53A3B4 99.9%, transparent 99.9%), linear-gradient(to right, #53A3B4 99.9%, transparent 99.9%);
}
.note.taupe:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #BDBB8B 50%)
}
.note.taupe {
  background-image: linear-gradient(to right, #999868 99.9%, transparent 99.9%), linear-gradient(to right, #999868 99.9%, transparent 99.9%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="note red">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="note blue">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="note taupe">
  <p>Lorem ipsum dolor sit amet</p>
</div>