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

Question

[Данил Флигинский]

Мне нужно реализовать такую форму. Я не пойму как создать такой border для form, чтобы он заходил на картинку и на кнопку, но при этом создавался промежуток. Всю голову сломал. Была только идея, которая показалась мне костылем:
вырезать линии слева и справа кнопки и картинки и просто разместить их по сторонам от нужных элементов. А вот у самой формы задать border-right и border-left. Подскажите вы, как правильно.

Answer 1

[ReActor Дмитрий Вершанский]

Вложите button в div, с размерами, большими чем размеры кнопки на столько, на сколько это требуется. Не забудьте прописать для div свойство background: #fff; Это создаст желаемый промежуток и у кнопки в том числе. А с изображением уже было сказано - наличие белых полей у исходника.

Answer 2

[i_m]

картинку через before с абсолютным позиционированием

Comments

[Данил Флигинский]

И тогда белый фон картинки будет создавать этот самый пробел?

[Данил Флигинский]

Если картинка и будет перекрывать border, из-за белого фона, то у кнопки же его нет

[Qeuvec]

Данил Флигинский, Я не уверен, но можешь попробовать добавить к картинке border под цвет фона, тем самым сделать такую-же имитацию.. border: 10px solid ТВОЙ ЦВЕТ;

[Евгений]

Qeuvec, икнопее тоже)

[Qeuvec]

Евгений, У картинки и так есть свой бордер, я про кнопку и говорю :Р

Answer 3

[Qeuvec]

Я бы попробовал сделать через position: relative;
Позиционирование относительно формы в диве;
https://developer.mozilla.org/ru/docs/Web/CSS/position

Comments

[Qeuvec]

Не уверен насчёт того, кто будет сверху - граница или картинка, так что ещё
юзани z-index
htmlbook.ru/samlayout/blochnaya-verstka/nalozhenie...