I tried every single AI tool and every single way just nothing works..
#Struggling to make this div design
raw canopy
analog solstice
Could you create a parent container with a width of 120vw so that the white boxes overflow and use overflow:hidden? And then have 3 divs to separate the left, middle and right. Then in the left and right divs, use grid and have two columns of divs like the white cards and use transform rotate? Or something like that maybe?
Or, create an image and use it as a background which would be easier, but not sure what your objective is here.
analog solstice
I managed to do this... create a left, middle, and right div to break up the screen. I orginallly used a body width of 120% but that didn't work out for me - position absolute I think was the trick. Set the widths of left, right and middle as percentages. Add negative margin to the left container on the left, top, and bottom and set overflow to hidden so that the cards can clip offscreen. Then create a card container that can hold two cards and rotate that container. There are some tricks to getting the middle black div centered. This was a lot of playing around with margins, position absolute, a little grid and flexbox to get alignments correct. In the image below I only did the left side, but the right is similar (and a bit opposite).
urban lodge
Seems like this should be possible with a gradient, like a repeating linear gradient maybe, on a pseudo element(s)? Possibly eith box-reflect? Or just 2nd pseduo element with the gradient reversed.
Perhaps w background-repeat: round?
Edit: I missed the rounded corners of the bricks. I think the easiest way to do this would to use an svg pattern as a mask, whipped up in figma or illustrator honestly. My gradients are not gonna be able to do the rounded corners without adding a radial gradient on each corner.