CSSリボン - 背景を無視して透明な三角形を作る方法

Question

イメージの上にリボンオーバーレイがあります。 リボンの右側に三角形が含まれている必要があります。

擬似要素で三角形を作成できましたが、親の背景色を無視するように色を設定する方法がわかりません。

現在、シェイプが描画されていることを示すために白に設定していますが、白を透明に設定したいと考えていました。

Codepen attempt here

.homefeed-img-container { 
    position: relative; 
    overflow: hidden; 
    min-height: 200px; 
    max-height: 458px; 
    height: auto; 
    width: 100%; 
    background-color: #f2f2f2; 
} 

.homefeed-img { 
    min-height: 200px; 
    width: 100%; 
    vertical-align: top; 
    object-fit: cover; 
} 

.home-img-time-overlay { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    background-color: green; 
    height: 45px; 
    padding: 10px 15px; 
    line-height: 1.8; 
    color: white; 
    width: 150px; 

    &:before, &:after { 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 45px; 
    top: 0; 
    right: 0; 
    content: ""; 
    } 

    &:before { 
    border-top: solid 22.5px transparent; 
    border-right: solid 20px #fff; 
    border-bottom: solid 22.5px transparent; 
    } 
} 

Answer 1

境界線の色を透明にすることはできますが、私は三角形を作成する方法を変更しました。私はラッパーの中に別のdivを三角形として追加し、どのようにフィットさせるかを決めました。 codepenスクリプトをチェックして結果を確認してください。

http://codepen.io/LevelZwo/pen/bepPvd

HTML：

<div class="home-img-time-overlay"> 
    2 minutes ago 
    <div class="triangle"></div> 
</div> 

CSS：

.home-img-time-overlay { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    background-color: green; 
    height: 45px; 
    padding: 10px 15px; 
    line-height: 1.8; 
    color: white; 
    width: 150px; 
} 

.triangle { 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 20px 20px 0 0; 
    border-color: green transparent transparent transparent; 
    position:absolute; 
    top:0; 
    right:-20px; 
} 

Answer 2

私はあなたが境界線を透明にすることができると思ういけません。主なオブジェクトの色は常に後ろになります。

境界線の色を背景画像と同じようにすることをお勧めします。

border-right: solid 20px #998485;