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%;
}

累 了我尝试使用背景属性，但它不仅背景为红色，而且前面部分也是如此。我希望前面部分是透明的，并用颜色填充文本部分。查看下面的图片，看看它是如何远离文本区域的，这里是它的代码

.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>

期望的结果 我试图摆脱最后一张图像左侧的红色三角形（漏斗等）。这样只有文本有背景