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

Question

[Neolq]

Нужен совет, как лучше добавить элементы на страницу.
Первый элемент - волнистая линия которая подчеркивает текст. Проще всего, просто вставить как svg. Но можно ли как-то корректно подстроить её, что бы при изменении текста(увеличения его количества), эта линия нормально подстраивалась? Либо просто нарисовать её через css?
Второй элемент - рамка вокруг, вместе с тремя стрелками, дело в том, что при адаптиве, элемент меняется. Как лучше поступить, вставить как картинку и при адаптиве подгружать другую или нарисовать через css.
Понимаю что вопросы очень тривиальные, но мне интересно как бы сделал опытный верстальщик. Спасибо.

Comments

[Ankhena]

1. решается с помощью svg на фоне background-repeat
2. фон однотонный, так что просто на рамку накладывается псевдоэлемент, у которого фон цветом и svg. При адаптиве изменяете положение псевдо.

[Neolq]

Ankhena, не совсем понимаю что вы имеете ввиду "на рамку". То-есть вставить рамку как картинку, а на неё наложить псевдо?

[Ankhena]

Neolq, либо рамку тоже псевдо.
Либо всё одной svg, но это смотря, как вы делаете резиновость-адаптивность

[Neolq]

Ankhena, проблема еще в том, что изображения чеснока, прибора и bg, вставляется как цельная картинка и особенно при адаптиве, сложно сохранить отступы в рамке, так как задумывается в макете. Может быть вставить всё как изображение, вместе с рамкой и не париться? Просто не могу нормально эту фигню адаптировать(

[Ankhena]

Neolq, постом выше я это предлагала.

Answer 1

[MamaLuyba]

по первому: сделай для svg - background-repeat: repeat-x. тогда линия будет рисоваться дальше, по длине текста.
по второму: рамку через border, отступы - padding, с добавлением фона картинкам, стрелки задать жестко, под разные варианты