Как правильнее сверстать такие элементы?

Ничего сложного не вижу в верстке. Запарная, но вполне реализуемая. Чего в комментариях ноет народ? Или Вам интересно 3 блока в ряд flex'ом закидать - "Ху*к-ху*к, и в продакшн"?
Делим на три блока: светлый, текст по центру, темный блок. Текст через shapes форматируем, форму каждого блок через clip-path, svg... Позиционируем чуть-чуть(много). Получаем итог. Ну a с нижней все понятно - transparent: skew, clip-path...

Вот хороший пример shapes - https://www.sarasoueidan.com/blog/css-shapes/
clip-path - https://developer.mozilla.org/en-US/docs/Web/CSS/c...

А мобильную пусть кидает макет дизайнер. Или он на полпути оставил Вас?

ps с поддержкой надо поиграть, но тоже ничего такого....
psps скинь макет. Ночью будет свободное время - сделаю.

Для верстки блоков нестандартной формы можно использовать css свойство clip-path

Вырезать png, не парится и сэкономить свое время и деньги. ИМХО никому не нужны заморочки со статическими страницами типа "визитка"

на счет clip-path & SVG, может кому-то пригодиться. https://github.com/andrusieczko/clip-path-polygon

Transform Skew