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

Question

[Ivan_KL]

Как правильно сверстать блок? Что бы верхняя и нижняя рамка прерывался на кнопке и иконке. Я же правильно понимаю, что бордером это не сделать и нужно делать через тег span?

Comments

[Одиночка Айс]

есть еще outline))

Answer 1

[Рома Зварич]

1) Иконку вверху можно через псевдоэлемент сделать.
2) Кнопку через абсолютное позиционирование выровнять

Результат:
https://codepen.io/hisbvdis/pen/rNBvbwo

Comments

[Ivan_KL]

Все равно получается так:
https://codepen.io/klypatskyy/pen/oNvdOKz?editors=1100


Спозиционировать я могу. Но вот как сделать пробел в бордере до меня не доходит. Просто если делать по вашему решению, то если вдруг цвет фона измениться - будет белое пятно. нужно будет менять цвет у бордера иконки.

[Рома Зварич]

Ivan_KL, тогда картику делаем отдельным элементом, а верхнюю границу формы делаем из двух псевдоэлементов

Результат:
https://codepen.io/hisbvdis/pen/vYBjwKe

P.S. Для нижней границы так же можно сделать. Но раз уж у нас оба всепдоэлемента формы заняты, придется добавить еще один элемент. Это уж Вы сами

[Ivan_KL]

Рома Зварич, Спасибо! Будем пробовать

Answer 2

[AleninD]

Ваш основной блок имеет position: relative.
Иконка и кнопка имеют: position: absolute и top\bottom позиционирование -----> первый вариант

Второй вариант - отрицательные margin. По факту выбрать то что удобнее, и то что лучше будет для адаптива.