title: how to write inside div borders with height zero
body: <p>Hi I want to make something like this <a href="https://i.stack.imgur.com/uemR5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uemR5.png" alt="picture"></a></p>
  
  <p>so far I have a div </p>
  
  <pre><code>&lt;div className="corner-bottom-left-bevel"&gt;
      new
  &lt;/div&gt;
  </code></pre>
  
  <p>using this sass style for it</p>
  
  <pre><code>$corner-bevel: 20;
  .corner-bottom-left-bevel {
      width: 80px;
      height: 0;
      border-radius: 2px;
      border-style: solid;
      border-color: $green-color transparent transparent transparent;
      border-width: #{$corner-bevel}px 0 0 #{$corner-bevel}px;
  }
  </code></pre>
  
  <p>it looks exactly how I want it to but the problem is that the text inside it, is visible inside the div and not its borders so it looks like the text is outside the div.
  Is there any way I could show it inside the div borders?
  Your help is appreciated in advance.</p>