title: how to get the text background only filled (creating flag)
body: <p>I am trying to create a flag using css
  Issue is that my text is in between and the area where there is text, there is no back ground color so it looks awkward. Please see the image attached
  <img src="https://i.stack.imgur.com/umxiC.png" alt="Current Image"></p>
  
  <p>CODE:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p><strong>TIRED</strong>
  I tried to use the background property but then it not only does the background red, but also the front part too. I want the front part to be transparent and fill the text part with color. Look in the image below to see how it went far out of the text area
  here is the code for that</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/tWhFS.png" alt="Red Color is extended besides the text"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="Caption"&gt;up to 50% off&lt;/span&gt;
  </code></pre>
  
  <p><strong>DESIRED RESULT</strong>
  I am trying to get rid of the red triangle (funnel etc) on left side of last image. so that only the text has the background</p>