title: Text in the DIV not showing
body: <p>I need to use this <strong>shape</strong> and inside that <strong>shows a text</strong>. But, I don't know why the text is <strong>not showing</strong>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="thebag"&gt;
    &lt;h3&gt; Shihab Mridha &lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#thebag{
    position: relative;
    overflow: hidden;
  }
  #thebag::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 30%;
    background: red;
  }
  #thebag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 30%;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 70px solid transparent;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kn87syvb/1/" rel="nofollow">https://jsfiddle.net/kn87syvb/1/</a></p>