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

Question

[markvasyliev]

Comments

[RAX7]

Как сегодня верстают такие бордеры?

Answer 1

[Назарий Лазарчук]

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

.квадрат {
position: relative; // или absolute
border: 4px solid yellow;
border-left: none;
width: ...;
height: ...;
}
.квадрат::before, .квадрат::after {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  background: yellow;
}
.квадрат::before {
  top: 0;
  height: ...;
}
.квадрат::after{
  bottom: 0;
  height: ...;
}

Comments

[maralov]

и между текстами тоже добавить псевдо

[Артур Белан]

А можно сделать просто весь border (жёлтый тот что), а тексту тоже добавить border: 30px; и текст сделать z-index: 10; что бы бордер у текста перекрывал первый бордер?

Answer 2

[Artyom]

Закинь картинку и этот прямоугольник под текст с помощью position и настрой z-index. если картинка на самом деле целый непрерывный прямоугольник то для текста еще paddind добавь

Answer 3

[RuWproSha]

Друже, вот тебе решение, уверен - разберешься, там все минимально просто.
Вот чудо-картинка производства Paint.

(986x572). На ее примере все поймешь.

HTML

<div class="wrap">
  <div class="consumer-container"><p class="text-1">Consumer<br>Products<br>Consulting</p></div>
  <div class="learn-container"><p class="text-2">Learn more</p></div>
</div>

CSS

.wrap {
  position: relative;
  width: 986px;
  height: 572px;
  background: url( КАРТИНКА С КВАДРАТОМ );
}
.text-1 {
  color: white;
  font-size: 30px;
  letter-spacing: 0.3em;  /* декор текста  */
}
.text-2 {
  color: #FEF200;
  font-size: 24px;
  text-decoration: underline; /* декор текста  */
}
.consumer-container {
  position: absolute;
  left: 40%;
  top: 28%;  /* позиции контейнеров, содержащих в себе текст */
}
.learn-container {
  position: absolute;
  left: 44%;
  top: 60%;  /* позиции контейнеров, содержащих в себе текст */
}

Результат: скриншот