CSS Путь клипа скрывает элементы

Question

Я использую clip-path для градиента вверху страницы на моем сайте. В идеале два угла должны встретиться, и проблем не будет.

Я расположил верхнюю часть так, чтобы они соприкасались, и ничего не должно быть в наклонном содержимом. Сначала я использовал top: -120px;, но изменил его на margin-top: -120px;. Выглядит нормально, и позиционирование может остаться, если это лучший подход.

Проблема в том, что контент застревает внизу вот так;

.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;
}
}

<div class="site-hero-colour"></div>
<div class="site-hero-content">
   <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1>
</div>

Моя мысль - вместо этого сделать что-то подобное

.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;
}

<div class="site-hero-colour"></div>
<div class="site-hero-content"></div>
<div class="new"> <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1></div>

Таким образом, после удаления высоты для этого элемента содержимое будет располагаться ниже. Мне интересно, есть ли лучший подход, чем этот, для их женитьбы без использования top или просто наличия здесь пустого DIV. Я в основном ищу мнения или лучшие подходы, потому что я нашел что-то в этом роде. Заранее спасибо.

Answer 1

Вы имели в виду квадрат, разделенный на два многоугольника?

попробуйте свойство cal c clip-path, как показано ниже.

.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 calc(100% - 100px));
      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%); */
      clip-path: polygon(0 0, 100% 100px, 100% 100%, 0 100%);
      position: relative;
      margin: 0;
      padding: 0;
      padding-top: 100px;
    }

<div class="site-hero-colour"></div>
  <div class="site-hero-content">
    <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1>
  </div>