Как сверстать подобный блок на чистом css?

Question

[Lapin45]

Доброго времени суток!

Подскажите, как сверстать блок слева как на картинке в форме регистрации?

Comments

[lUser L]

Svg, или картинка фоном для профанов, да ?

[Lapin45]

Эмиль 🔥, а как это сделать на css? Чтобы не просто картинкой вставить, а сверстать с помощью canvas, к примеру(вроде на канвасе подобные штуки делаются)

[posters]

Lapin45, зачем делать просто, если можно сделать сложно, да?)

[Vladislav]

posters, так бы каждый сайт верстался бы картинкой и css нафиг не нужен был бы :)

[posters]

Vladislav, в крайности впадать незачем. Сайт картинкой плохо адаптируется и с сео не дружит. Тут другой случай и сравнивать некорректно.

[Vladislav]

posters, это был сарказм, думаю вы поняли :)

Answer 1

[Максим]

Если SVG шка интересует то вот: https://codepen.io/topicstarter/pen/mdmeQWJ

Comments

[Dimka59]

Как вы сделали это руками все прописываете или программа для этого есть специальная?)

[Максим]

Dimka59, в inkscape сделал а круги/градиенты руками

Answer 2

[Степан Боцко]

Я предлагаю следуючий вариант.
Верстаем две части: левую и правую.
в правой вроде все просто, а в левой - задаем бекграунд-градиет.
Внутри которого будем размещать некоторые его дочерние елементы - лого, текст, круги. Всех их я верстал бы абсолютом, предварительно задав левой части формы - position: relative.
Создаем еще один блок - для бекграунда волнистого цвета - по диагонали блока... ее тоже абсолютом делаем, и задаем чтобы она занимала всю высоту и ширину родителя. Ее z-index - будет меньше чем в текстов, лого и кругов, но больше чем в бекграунда волнистого цвета. Сам волнистый бекграунд я бы просил в дизайнера, так как пока нет идей как реализовать такие волны =/.
Если говорить о адаптивности , то я бы компонировал таким образом елементы https:// prnt . sc/ 18hg5rm - уберите проблелы =)

Answer 3

[Айрат]

Доброго.
В данном случае блок можно сверстать так:

1. в процентах задаем ширину левому блоку (на картинке это где-то 60% от ширины всего блока)
   
2. данный фон в левом блоке (включая круги и волны) делаем одной картинкой и вставляем фоном
   
3. задаем левому блоку общий padding, например 20px
   
4. все текстовые элементы и логотип верстаем обычным образом в блочном потоке
   

Благодаря данному подходу наша сетка будет адаптивной. Позиционировать элементы абсолютом в данном случае совсем не уместно, так как при сжатие и расширении вся сетка поломается.