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

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

Подскажите, как сверстать блок слева как на картинке в форме регистрации?
60e1883c4aa07816839388.jpeg
  • Вопрос задан
  • 600 просмотров
Пригласить эксперта
Ответы на вопрос 3
LenovoId
@LenovoId
I want, women not to get sick
Если SVG шка интересует то вот: https://codepen.io/topicstarter/pen/mdmeQWJ
Ответ написан
Stepan_1996
@Stepan_1996
Верстальщик
Я предлагаю следуючий вариант.
Верстаем две части: левую и правую.
в правой вроде все просто, а в левой - задаем бекграунд-градиет.
Внутри которого будем размещать некоторые его дочерние елементы - лого, текст, круги. Всех их я верстал бы абсолютом, предварительно задав левой части формы - position: relative.
Создаем еще один блок - для бекграунда волнистого цвета - по диагонали блока... ее тоже абсолютом делаем, и задаем чтобы она занимала всю высоту и ширину родителя. Ее z-index - будет меньше чем в текстов, лого и кругов, но больше чем в бекграунда волнистого цвета. Сам волнистый бекграунд я бы просил в дизайнера, так как пока нет идей как реализовать такие волны =/.
Если говорить о адаптивности , то я бы компонировал таким образом елементы https:// prnt . sc/ 18hg5rm - уберите проблелы =)
Ответ написан
Комментировать
Airat-2020
@Airat-2020
Frontend developer
Доброго.
В данном случае блок можно сверстать так:
  1. в процентах задаем ширину левому блоку (на картинке это где-то 60% от ширины всего блока)
  2. данный фон в левом блоке (включая круги и волны) делаем одной картинкой и вставляем фоном
  3. задаем левому блоку общий padding, например 20px
  4. все текстовые элементы и логотип верстаем обычным образом в блочном потоке

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы