title: CSS Clip Path hides elements
body: <p>I'm using <code>clip-path</code> for a gradient at the top of a page on my site. Ideally the two angles would meet up and there would be no issues.</p>
  
  <p>I've positioned the top so that they touch and nothing should be in the angled content. I initially used <code>top: -120px;</code> but changed it to <code>margin-top: -120px;</code> It looks fine and the positioning could stay if this is the best approach.</p>
  
  <p>The issue is that the content gets stuck underneath like this;</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>.site-hero-colour {
      min-width: 100%;
      max-width: 100%;
      min-height: 600px;
      max-height: 600px;
      background: linear-gradient(-45deg, #FFFFFF, #000000);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
      margin: 0;
      padding: 0;
      position: relative;
  }
  
  @media only screen and (max-width: 500px) {
  .site-hero-colour {
      min-width: 100%;
      max-width: 100%;
      min-height: 400px;
      max-height: 400px;
      background: linear-gradient(-45deg, #FFFFFF, #000000);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
      margin: 0;
      padding: 0;
      position: relative;
  }
  }
  
  .site-hero-content {
      min-width: 100%;
      min-height: 160px;
      background: #FFFFFF;
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
      position: relative;
      margin-top: -120px;
      margin: 0;
      padding: 0;
  }
  
  @media only screen and (max-width: 500px) {
  .site-hero-content {
      min-width: 100%;
      min-height: 160px;
      background: #FFFFFF;
      clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
      position: relative;
      margin-top: -40px;
      margin: 0;
      padding: 0;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="site-hero-colour"&gt;&lt;/div&gt;
  &lt;div class="site-hero-content"&gt;
     &lt;h1&gt;This gets cut off. It should sit on top of the white space or be positoned to match up.&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My thought is to do something like this instead</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>.site-hero-colour {
      min-width: 100%;
      max-width: 100%;
      min-height: 600px;
      max-height: 600px;
      background: linear-gradient(-45deg, #FFFFFF, #000000);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
      margin: 0;
      padding: 0;
      position: relative;
  }
  
  @media only screen and (max-width: 500px) {
  .site-hero-colour {
      min-width: 100%;
      max-width: 100%;
      min-height: 400px;
      max-height: 400px;
      background: linear-gradient(-45deg, #FFFFFF, #000000);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
      margin: 0;
      padding: 0;
      position: relative;
  }
  }
  
  .site-hero-content {
      min-width: 100%;
      background: pink;
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
      position: relative;
      margin-top: -120px;
      margin: 0;
      padding: 0;
  }
  
  @media only screen and (max-width: 500px) {
  .site-hero-content {
      min-width: 100%;
      background: pink;
      clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
      position: relative;
      margin-top: -40px;
      margin: 0;
      padding: 0;
  }
  }
  
  .new {
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="site-hero-colour"&gt;&lt;/div&gt;
  &lt;div class="site-hero-content"&gt;&lt;/div&gt;
  &lt;div class="new"&gt; &lt;h1&gt;This gets cut off. It should sit on top of the white space or be positoned to match up.&lt;/h1&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This way the content sits below once the height has been removed for that element. I'm wondering if there's a better approach to take than this one for marrying them up without using <code>top</code> or just having an empty DIV here. I'm mainly looking for opinions or better approaches because I've found something that sort of works. Thanks in advance.</p>