css - テキストの背景のみを塗りつぶす方法 (フラグの作成)

Question

css を使用してフラグを作成しようとしています 問題は、テキストがテキストのある領域との間にあることです。背景色がないため、ぎこちなく見えます。添付画像をご覧ください

コード：

.Caption {
    position: relative;
    font-size: 16px;
    line-height: 18px;
    padding-bottom: 16px;
}

.Caption span {
    display: block;
    clear: both;
    content: '.';
    position: relative; left: -25px;
    border-top: 25px solid navy;
    border-left: 26px solid transparent;
    border-bottom: 25px solid navy;
    float: right;
    margin-top: -40%;
    margin-right: 2%;
}

疲れ た background プロパティを使用しようとしましたが、背景が赤になるだけでなく、前面も同様に処理されます。前の部分を透明にして、文字の部分を色で塗りつぶしたいです。下の画像を見て、テキスト領域からどのように外れたかを確認してください。ここにそのコードがあります

.Caption span {
    display: block;
    clear: both;
    content: '.';
    background-color:red;
    position: relative; left: -25px;
    border-top: 25px solid navy;
    border-left: 26px solid transparent;
    border-bottom: 25px solid navy;
    float: right;
    margin-top: -40%;
    margin-right: 2%;
}

HTML

<span class="Caption">up to 50% off</span>

望ましい結果 最後の画像の左側にある赤い三角形 (じょうごなど) を取り除こうとしています。テキストだけが背景を持つように