Criando um banner com 5 imagens simétricas separadas por linhas diagonais

Emulando um banner de imagem simétrica

Em uma era de conteúdo visual cativante, criando visualmente designs atraentes tornaram-se imperativos. Essa busca pela excelência estética levou o usuário a se deparar com um banner marcante no Reddit, apresentando cinco imagens dispostas simetricamente e separadas por linhas diagonais. Inspirado neste design, o usuário embarcou em uma jornada para emular algo semelhante, incorporando cinco imagens de sua escolha e adicionando sobreposições de texto. Após algumas experiências usando CSS e imagens de gatos, o usuário encontrou desafios com posicionamento e distribuição de imagens.

Uma solução simplificada

Em vez de depender de elementos de posicionamento, o usuário adotou uma abordagem mais direta usando Flexbox . Ao criar um contêiner com cinco itens Flexbox e aplicar transformações de inclinação a cada caixa, o efeito desejado foi alcançado sem a necessidade de posicionamento complexo.

O trecho a seguir demonstra como criar esse arranjo simétrico de imagens:

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