Диагональные блоки в CSS
![](/static/storage/198053171137606951140140331951699929787.png)
Существуют разные способы создания диагональных сечений. В нашем случае мы полагаемся на свойство clip-path.
Свойство clip-path позволяет обрезать элемент, к которому он применяется, путем определения области, которая действует как маска. В частности, функция многоугольника позволит вам указать наборы координат, которые определяют форму многоугольника. Часть элемента, которая находится за пределами многоугольника, не будет видна.
.component { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
В приведенном выше примере координаты возвращают прямоугольную форму. Первое значение координаты относится к оси x, второе - к оси y.
![](/static/storage/136282544354812002220339154321574379158.png)
Редактируем координаты, чтобы вырезать части блока.
.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 напрямую, мы в конечном итоге показываем часть фона под ним (часть, которая вырезана). Если мы рассмотрим макет с разделами разных цветов, мы создадим треугольники между разделами:
![](/static/storage/219602580372532721867743912143508515512.png)
Создав псевдоэлемент ::before
, мы можем расширить размер фона hero (покрывая небольшую часть верхней и нижней границ), тем самым устраняя лишние треугольники. Свойство clip-path затем применяется к псевдоэлементу для создания диагональных ребер.
![](/static/storage/64541402582761336372116865914623156404.png)