title: text over a clip path
body: <p><a href="https://i.stack.imgur.com/OlXYF.png" rel="nofollow noreferrer">This is my cover page</a></p>
  
  <p>What I need is that the white letters flow over the clip path
  I have tried <code>z-index</code>, but that doesn't work</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
      height: 85vh;
      background-image: linear-gradient(
          to right bottom,
          rgba(255,255,255, 0.8),
          rgba(0,0,0, 0.8)),
      url(../../img/hero.jpg);
      background-size: cover;
      background-position: top;
      position: relative;
  
      clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header"&gt;
      &lt;div class="header__logo-box"&gt;
          &lt;img src="img/logo-white.png" alt="Logo" class="header__logo"&gt;
      &lt;/div&gt;
  
      &lt;div class="header__text-box"&gt;
          &lt;h1 class="heading-primary"&gt;
              &lt;span class="heading-primary--main"&gt;My Blog&lt;/span&gt;
              &lt;span class="heading-primary--sub"&gt;Enrique Cena&lt;/span&gt;
          &lt;/h1&gt;
  
          &lt;a href="#section-tours" class="btn btn--white btn--animated"&gt;About me&lt;/a&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>