Как бы Вы реализовали прерывающуюся рамку?

Question

[mozgotrash]

Answer 1

[Павел]

Левая, правая и нижняя границы - это границы одного блока, а верхняя - это нижняя граница для другого пустого блока без высоты. убрать все отступы между ними, чтобы выглядело, как целый прямоугольник. И у того, что выше z-index меньше, чем у блока с мужиком. Надеюсь, доступно сформулировал свою мысль)

Answer 2

[Serj-One]

<div class="test">
  <div class="img"></div>
</div>

.test {
  width: 800px;
  height: 200px;
  border: 10px solid #bebebe;
  border-bottom: none;
  margin: 100px auto;
  position: relative;
}
.test:after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: #bebebe;
  position: absolute;
  left: 0;
  bottom: 0;
}

.img {
  width: 200px;
  height: 400px;
  background: yellow;
  margin: -100px auto 0;
}

pen

Answer 3

[BBmike]

уже был этот вопрос с этим же макетом.
это тест на вакансию?

Comments

[mozgotrash]

Нет, это просто бесплатный красивый макет, который нашел в инете для тренировки верстки

Answer 4

[Barmunk]

Мужика бы разрезал на 2 части

Comments

[Serj-One]

Дизайнера, что нарисовал это макет? )