透明な背景でCSS折りたたみコーナーエフェクトを作成するには？

Question

誰かが私を助けることができますか？折りたたみコーナーを無地の色ではなく透明にする必要があります。あなたの参照のための下の画像を見ることができます。

私はこれらのコードを試してみました：私はあなたを助けるかもしれない例のカップルを見つけ

.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

。 最終的な効果を達成するために、著者がいくつかのの形を使用する第2のものを特に見てください。

https://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/

https://codepen.io/Martin-Duran/pen/kFpaI

• 私はそれが行く方法を知ってみましょう。