title: CSS folded corner effect transparent background
body: <p>I have this Code for folded corner using CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="note"&gt;
    &lt;p&gt;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.&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, in really action this worked but in top corner I see <code>white</code> background. how do remove white background and replace with <code>transparent</code>.</p>
  
  <p>DEMO <a href="http://jsfiddle.net/5g8dkrhk/">HERE</a> </p>