Диагональные блоки в CSS 

Существуют разные способы создания диагональных сечений. В нашем случае мы полагаемся на свойство clip-path.

Свойство clip-path позволяет обрезать элемент, к которому он применяется, путем определения области, которая действует как маска. В частности, функция многоугольника позволит вам указать наборы координат, которые определяют форму многоугольника. Часть элемента, которая находится за пределами многоугольника, не будет видна.

.component {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

В приведенном выше примере координаты возвращают прямоугольную форму. Первое значение координаты относится к оси x, второе - к оси y.

Редактируем координаты, чтобы вырезать части блока.

.hero--diagonal {
  position: relative;
  background-color: transparent; 
  
  &::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    clip-path: polygon(0% 0%, 100% 50px, 100% 100%, 0% calc(100% - 50px));
  } 
  .hero__content {
    position: relative;
    z-index: 1;
  }
}

Вместо того, чтобы применять путь клипа к самому элементу hero, мы решили нацелиться на его псевдоэлемент.

Если мы обрезаем элемент hero напрямую, мы в конечном итоге показываем часть фона под ним (часть, которая вырезана). Если мы рассмотрим макет с разделами разных цветов, мы создадим треугольники между разделами:

Создав псевдоэлемент ::before, мы можем расширить размер фона hero (покрывая небольшую часть верхней и нижней границ), тем самым устраняя лишние треугольники. Свойство clip-path затем применяется к псевдоэлементу для создания диагональных ребер.