title: How to implement an pure-CSS flag-shape container?
body: <p>My target is to implement a pure-CSS flag-shape container like this:</p>
  
  <p><a href="https://i.stack.imgur.com/8jD45.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8jD45.png" alt="enter image description here"></a></p>
  
  <p>Requirements include:</p>
  
  <ul>
  <li><code>background-color</code> of parent container is unknown</li>
  <li>works for different <code>line-height</code> and <code>font-size</code> settings</li>
  </ul>