What is the best way to arrange such elements?

Question

css

Answer 1

I don't see anything complicated in layout. Challenging, but doable. What are people whining about in the comments? Or are you interested in throwing 3 blocks in a row with flex - "Khu*k-hu*k, and into production"?
We divide into three blocks: light, text in the center, dark block. We format the text through shapes, the shape of each block through clip-path, svg... We position a little (a lot). We get the result. Well, everything is clear from the bottom - transparent: skew, clip-path...
Here is a good example of shapes - https://www.sarasoueidan.com/blog/css-shapes/
clip-path - https://developer.mozilla. org/en-US/docs/Web/CSS/c...
And let the designer throw the mobile layout. Or did he leave you halfway?
ps with support you need to play, but also nothing like that ....
psps throw off the layout. At night there will be free time - I will do it.

Answer 2

For laying out blocks of a non-standard form, you can use the css property clip-path

Answer 3

Cut png, no steam and save your time and money. IMHO, no one needs troubles with static pages like "business card"

Answer 4

at the expense of clip-path & SVG, may be useful to someone. https://github.com/andrusieczko/clip-path-polygon

Answer 5

Transform Skew