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

Question

[skuvaWeb]

Как создать подобную рамку?

Answer 1

[Ankhena]

2 варианта: https://jsfiddle.net/o4wjbkzc/

Answer 2

[AngReload]

Answer 3

[Nikita-Fast]

https://codepen.io/topicstarter/pen/WaKGjN пожалуйста, работает на hover

Comments

[skuvaWeb]

Вы сделали это с помощью какого-то сервиса?

[skuvaWeb]

И ещё меня смущает что текст внутри svg, другого варианта нет?

[Nikita-Fast]

skuvaWeb, вы указали тег SVG и я сделал на SVG

[skuvaWeb]

Nikita-Fast, я имел в виду, можно ли как-то разграничить svg и текст, ведь текст то нужно как-то через админку в будущем менять. И подскажите пожалуйста, вы вручную сделали данный пример или с помощью какого-то инструмента?

[Nikita-Fast]

skuvaWeb,

можно ли как-то разграничить svg ?

можно , можно рискнуть в SVG вставить переменные ... но если вы заметили то количество текста внутри обводки я пытался сократить до 5ти знаков т.е по просто сказать ссылки подобрал с 5тью знаками , если же допустим ссылка будет recomendation то и координаты обводки изменятся и потому - надо иметь не много опыт но можно рисовать через редакторы

вы вручную сделали данный пример или с помощью какого-то инструмента?

конечно в ручную ....есть редакторы svg типа corel draw illustrator inkscape - можно в них делать ...я раньше так и делал но последнее время если просто то я делаю руками если структура нужна сложная то в редакторе

Answer 4

[Андрей Гончаров]

Что-то сложное подсказывают) обычная кнопка с бордерами с трех сторон (верх, низ, лево) и двумя псевдоэлементами для стилизации правого оборванного бордера. Минимум разметки, чуть стилей, все адаптивно и нет проблем с админкой.

Comments

[igumenov]

Пожалуй самое удобное решение