Creating a Banner with 5 Symmetric Images Separated by Diagonal Lines

Emulating a Symmetrical Image Banner

In an era of captivating visual content, creating visually appealing designs has become imperative. This quest for aesthetic excellence led the user to stumble upon a striking banner on Reddit, featuring five symmetrically arranged images separated by diagonal lines. Inspired by this design, the user embarked on a journey to emulate something similar, incorporating five images of their choice and adding text overlays. After some experimentation using CSS and cat images, the user encountered challenges with image placement and distribution.

A Simplified Solution

Instead of relying on positioning elements, the user adopted a more straightforward approach using Flexbox. By creating a container with five Flexbox items and applying skew transformations to each box, the desired effect was achieved without the need for complex positioning.

The following snippet demonstrates how to create this symmetrical image arrangement:

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