Этот вопрос закрыт для ответов, так как повторяет вопрос Как сегодня верстают такие бордеры?
@markvasyliev

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

5f01d6d7b11e5665200047.png
  • Вопрос задан
  • 238 просмотров
Решения вопроса 1
@LazarchukNazar
Джаваскриптизер
Это легко делаеться через псевдоелементы. Что я имею ввиду: Желтый квадрат на самом деле имеет бордер (обводку) только с трех сторон, четвертая же сделана визуальными елементами, которые позиционируються абсолютом
.квадрат {
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: ...;
}
Ответ написан
Ответы на вопрос 2
@ArtYarm
Закинь картинку и этот прямоугольник под текст с помощью position и настрой z-index. если картинка на самом деле целый непрерывный прямоугольник то для текста еще paddind добавь
Ответ написан
@RuWproSha
Друже, вот тебе решение, уверен - разберешься, там все минимально просто.
Вот чудо-картинка производства Paint.
5f02504d74a9b398362775.jpeg
(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%;  /* позиции контейнеров, содержащих в себе текст */
}


Результат: скриншот
5f0250d23bab7352427887.jpeg
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы