Как создать этот стиль границы? http://joxi.ru/gmvp74MTxD6lNA

Текст с рамками, но на одной стороне границы есть другой текст.

Код, который я пробовал:

.banner-text {
z-index:8;
display: inline-block;
font-size: 28px;
padding: 50px;
text-transform: uppercase;
color: #fff;
text-align: center;
border: 1px solid #fff;
}

.banner-subtext {
z-index:9;
color: #fff;
text-align: center;
margin-top: -25px;
background-color: rgba(0,0,0,0);
}

.banner-subtext::before {
}
-3
dis 3 Янв 2018 в 06:41

2 ответа

Лучший ответ

Вы можете использовать рамку на основном контейнере, но скрыть нижнюю. Затем используйте псевдоэлемент, чтобы заполнить отсутствующую границу:

body {
 text-align:center;
 background:linear-gradient(to right, yellow, white);
}

.banner-text {
  display: inline-block;
  font-size: 28px;
  padding: 50px;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  border: 1px solid #000;
  border-bottom: none;
  position: relative;
}

.subtext {
  position: absolute;
  font-size: 18px;
  left: 0;
  right: 0;
  bottom: -10px;
  text-align: center;
  display: flex;
  align-items: center;
}

.subtext:after,
.subtext:before {
  content: " ";
  height: 1px;
  background: #000;
  flex: 1;
}

.subtext:after {
  margin-left: 5px;
}

.subtext:before {
  margin-right: 5px;
}
<div class="banner-text">
  my text
  <div class="subtext">Sub text</div>
</div>
0
Temani Afif 9 Янв 2018 в 15:36

Этот прямоугольник, скорее всего, является векторной графикой, расположенной поверх фонового изображения. Текст, вероятно, является его частью, но возможно, что текст является дополнительным div внутри изображения.

Другой вариант состоит в том, что у большего текста есть граница, установленная сверху, слева и справа, а подтекст имеет отрицательное верхнее поле вместе с элементами :: before и :: after psuedo, для которых определены граница и ширина

0
Kyle R 3 Янв 2018 в 05:01