Диагональные контейнеры в CSS

CSS3 05.03.2021

В этом руководстве мы рассмотрим, как создавать полноширинные диагональные секции в CSS с помощью свойства clip-path.

Подобные эффекты могут помочь сломать «монотонность» дизайна, основанного только на прямоугольных сечениях.

Давайте сделаем это!

Есть разные способы создания диагональных секций (разве это не всегда верно в CSS?). В нашем случае мы полагаемся на свойство clip-path.

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


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

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

Диагональные контейнеры в CSS

пример координат клипа

В нашем руководстве мы хотим создать фигуру, которая отличается от формы основного компонента; поэтому мы редактируем координаты, чтобы вырезать части контейнера.


.hero--diagonal {
    position: relative;
    background-color: transparent;
}
.hero--diagonal::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--diagonal .hero__content {
    position: relative;
    z-index: 1;
}

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

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

свойства clip-path

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

полноширинные диагональные секции в CSS