Создание баннера с 5 симметричными изображениями, разделенными диагональными линиями

Имитация симметричного графического баннера

В эпоху увлекательного визуального контента, создание визуального контента привлекательный дизайн стал обязательным условием. Стремление к эстетическому совершенству привело к тому, что пользователь наткнулся на яркий баннер на Reddit, состоящий из пяти симметрично расположенных изображений, разделенных диагональными линиями. Вдохновленный этим дизайном, пользователь отправился в путь, чтобы подражать чему-то подобному, включив пять изображений по своему выбору и добавив наложение текста. После некоторых экспериментов с использованием CSS и изображений кошек пользователь столкнулся с проблемами при размещении и распространении изображений.

Упрощенное решение

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

Следующий фрагмент демонстрирует, как создать это симметричное расположение изображений:

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}