Как адаптивно сверстать кнопку со сложными декоративными элементами на произвольном фоне?

Question

[Greg78]

Как сверстать такую кнопку со сложными декоративными элементами и сделать ее адаптив? На мобильном ширина кнопки уменьшается до 345px и линия верхней границы должна уменьшаться пропорционально ширине.
Фон будет произвольный. Верхние и нижние элементы есть в svg/png

Comments

[Вадим]

Что Вы уже сделали и что не получилось?

[Greg78]

ну тогда просто сгруппируйте эти 2 линии и центральный svg в 1 svg - это решение

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/mdqrORo

Comments

[Greg78]

Да, это то что нужно. Большое спасибо

Answer 2

[ForSureN1]

Ну думаю что здесь все очень просто, задняя линия это по факту клон кнопки, только с белой заливкой, делаем ее через before, и даем ширину в 90% , соответственно она будет автоматически уменьшаться относительно главной кнопки, для верхнего svg элемента мы так же можем обернуть в див, и ему уже дать белый фон, чтобы перекрывал линию, либо же еще проще вариант просто вытащить ее в jpg, где уже будет этот белый фон, ну а нижняя svg вообще не составляет каких либо проблем, думаю смог бы сделать эту кнопку за ~5 минут

Comments

[Greg78]

Но в макете фон под кнопкой не белый а произвольный, его белым залить не получится. Между черной кнопкой и границами должен быть произвольный фон макета

[ForSureN1]

Greg78, ну тогда просто сгруппируйте эти 2 линии и центральный svg в 1 svg , и будет вам счастье

[Greg78]

ну тогда просто сгруппируйте эти 2 линии и центральный svg в 1 svg это решение

[ForSureN1]

Greg78, На здоровье)