Как сверстать данный блок?

Question

[Freeman0205]

Помогите пожалуйста сверстать данный блок, интересует решение с рамкой. Спасибо заранее!

Answer 1

[Ankhena]

Как-то так https://jsfiddle.net/rmg83fvj/

css

.form {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 40px;
  padding: 30px;
  border: 1px solid gray;
}

.form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid red;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #fff;
  background: #fff;
  /* и ваша картинка*/
}

.btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  padding: 0.5em 1em;
  box-shadow: 0 0 0 10px #fff;
  background: #f00;
  border: 0;
  color: #fff;
}

html

<form class="form" action="">
  <input type="text">
  <input type="text">
  <input type="text">
  <button class="btn" type="submit">btn</button>
</form>

Не забудьте, что инпутам нужен label. Но это уже самостоятельно.

Comments

[Freeman0205]

Отлично, спасибо!

[Ankhena]

Freeman0205, помогло? Отмечайте решением, чтобы другим тоже помогло

[Danny Arty]

Ankhena,

Отмечайте решением, чтобы другим тоже помогло

а че так можно было?)

[Ankhena]

Danny Arty, искать по вопросам? Нет. Но я не теряю надежду.

[Danny Arty]

Ankhena, да нее, я о том, чтобы писать авторам, мол "отмечай решением - поможешь другим")

[Ankhena]

Danny Arty, когда ищешь решение на просторах тостеров-стаковерфлоу и подобных, заметно удобнее начинать с ответов, которые отмечены как помогающие в решении вопроса, чем лопатить все подряд.
Но новички на таких сервисах не всегда это понимают или скорее вообще не задумывались над этим.
Поэтому, почему бы не подсказать не только по вопросу, но и о "понятиях" и культуре в сообществе.
Для этого же и кураторам дано право отмечать ответы решениями, а пользователям голосовать за ответы.

[Danny Arty]

Ankhena, и то верно

Answer 2

[Danny Arty]

Например так

Comments

[Дюша Метёлкин]

там девушка на иконке а у тебя мужик

[Danny Arty]

Дюша Метёлкин, ля, ну сорян, не претендую на 100% идентичность

[Danny Arty]

Дюша Метёлкин, кстати идея основания движения #DyushaMetelkinLiveMatter не твоя - это я тебе дал подсказку. Где ваше уважение, сударь?

[Дюша Метёлкин]

Danny Arty, джентльмен попрошу вас не присваивать себе чужую идею

[Danny Arty]

Дюша Метёлкин, ай ай ай, вот оно как значит... а когда в своем вопросе жаловались на то, что не отмечают ответ решением, и я написал #DyushaMetelkinLiveMatter не припоминаете сударь?)

Нынче видимо любую идею стоит сразу патентовать. А то работники всяких бизнес-мастодонтов (как вы и яндекс) могут с легкостью присвоить ее себе)

[Дюша Метёлкин]

Danny Arty, :)

Answer 3

[approximate solution]

Все очень просто, рамка у вас position: relative, кнопка и портрет:position: absolute с значениями top\bottom собственно для каждого - подбираете значение и выравниваете. left: 50%;transform: translateX(-50%),что бы выравнивать всегда по центру относительно рамки.
z-index: 1перекроет вашу рамку кнопкой и портретом. Белый кант вокруг кнопки\портрета можно сделать с помощью ::after

Comments

[Freeman0205]

Спасибо, вроде все знал а из головы вылетает))

[approximate solution]

Freeman0205, С кем не бывает