Возможно ли сделать такое оформление?

Question

[RINCODE]

Возможно ли сделать так, чтобы на фоне были эти элементы?
Я новичок и не нашёл способа это сделать, возможно ли это сверстать и если возможно, то как? Спасибо

Answer 1

[Алексей]

Возможно, с помощью CSS.
Из очевидного: border-radius + opacity

Comments

[RINCODE]

Не понял, как вот это сделать с помощью border-radius

[Алексей]

RINCODE, береш 2 дива, заворачиваешь углы, ставишь опасити на полупрозрачные и накладываешь как тебе нужно. Либо юзаешь канвас

[RINCODE]

Алексей, А как их наложить, чтобы они были на заднем фоне и не двигали элементы?

[Алексей]

RINCODE, position: absolute

[RINCODE]

Алексей, А при absolute вроде адаптивная верстка ни гугу (оно съесть вроде должно)

[Froggyweb]

вряд ли это нужно верстать вообще. смысл какой? то что это можно сверстать? Чела тоже можно сверстать...
это просто картинка

[Алексей]

RINCODE, ну это уже тебе виднее чего там на адаптиве будет. Я ток не понял, а в чем проблема сделать всю правую часть в фотошопе, вместе с мужиком ?

[RINCODE]

Алексей, Ну там часть выезжает на другой слой

[Алексей]

RINCODE, и ?

[RINCODE]

Алексей, Всмысле и?), если блок ограничен он не сможет выехать)

[Алексей]

RINCODE, чем у тебя там блок ограничен то ? привязка идет к врапперу твоих блоков, ну или если хочешь сделай его просто без overflow:hidden и zindexом.
Ты мужика тоже собрался делать через CSS ? Для начала реализуй хотя бы так чтоб не выезжало, а уже потом будем смотреть

Answer 2

[Ваня Зюзгин]

На чистом CSS без SVG можно вот так - https://codepen.io/itshaman/pen/rNZZQoo

Answer 3

[Vladimir Kalaganov]

Можно выгрузить в SVG эти элементы, затем положить в псевдоэлемент

А чтобы всегда был в нужном месте использовать position: absolute; плюс

left: 50%;
transform: translateX(-50%); // подвинуть в нужно положение

для родительского блока, который оборачивает эту картинку с текстом не забыть про position: relative;

Пример https://codepen.io/kalaganov5/pen/NWLLOpK

Comments

[RINCODE]

А как сделать чтобы он был за человеком?), просто положить его выше?

[Vladimir Kalaganov]

RINCODE, надо поэксперементировать,
чуть обновил пример должно помочь

https://codepen.io/kalaganov5/pen/NWLLOpK

[RINCODE]

Vladimir Kalaganov, Спасибо, посмотрю