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

Question

[Андрій Брода]

Такие элементы как синяя линия, круг и т.д

Answer 1

[Lumore]

SVG

Comments

[Андрій Брода]

И всех их размещать при помощи абсолютного позиционирования?

[Вадим Полухин]

Андрій Брода, Там где наезжает на фото - да, сверху можно и без

Answer 2

[Евгений]

картинкой

Answer 3

[Максим Углов]

Круг - можно используя border и подберая border-radius, но может не получится идеальный круг, тогда немного нужно изменить общий размер.

.circle{
width: 100px;
height: 100px;
border: 4px solid blue;
border-radius: 50px;

}

Волну проще всего картинкой, но если есть какието указания не использовать картинки то SVG

Answer 4

[nichvlas]

Этот макет из html academy
А у них есть курс по свг и как его рисовать через css
https://htmlacademy.ru/courses/130
Для таких простых элементов вроде изогнутой линии вполне можно заморочиться и сделать

Comments

[Андрій Брода]

А как их позиционировать, относительно чего?

[nichvlas]

Если он декоративный, то position: absolute
Его родитель будет position: relative
Чтобы позиционировать его не относительно окна браузера, а непосредственно родителя

Answer 5

[Егор Живагин]

svg

Answer 6

[Максим Тимофеев]

svg через defer и потом через use дергать. Оптимально, удобно, стилизуемо через css

Answer 7

[lukoie]

проще и быстрей всего- нарисовать в иллюстраторе и сохранить как SVG, а потом как обычную картинку

Answer 8

[Дмитрий Pacification]

Еще способ: border-image с repeat