Slanted design

[sukaram]

Please help me. I am stuck on this design. I want the code for the design that looks like this (Link below). I found it a bit tricky and I need help on it.

NEEDED:-
Left content – Right image or vice-versa (as shown on the design)
Content can be longer so image height should be relative to the content on the left or right.

Can anyone please help me on this issue? Sorry for my bad English!

Thank you on advance.

Link to the image:- https://imgur.com/a/RJHyDiH

[Beverleyh]

I am stuck on this design

What are you stuck on exactly?

I want the code for the design that looks like this

??? Sorry – We aren’t here to do your work for you. If you show us your own code, and clearly explain the problem along with what you’ve tried yourself to achieve the desired outcome, we can offer suggestions on how to fix it.

General suggestion: if you’re asking for advice on how to create the rhombus shapes, I think I’d be tempted to start out with regular upright squares, and then use pseudo elements to create white triangles (on the top and bottom of the white squares) that overlap/mask out the adjacent images.

[sukaram]

@Beverleyh Okay. Here is what I have come up with. https://codepen.io/anon/pen/omPqzb

But the real problem is when the content is longer then it doesn’t work anymore. I can’t really explain it. There will be gap between the sections if the content is longer.

Hope this helps on my query.

[Beverleyh]

I was thinking more like this https://codepen.io/anon/pen/wNEQXX

[sukaram]

Thank you very much! This is exactly what I needed. You are awesome! 👍👍👍

[Beverleyh]

No problem :)

[Author]

Posts