如何在 html/css 中创建矩形

Question

如何创建此边框样式？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 {
}

Answer 1

您可以在主容器上使用边框，但隐藏底部容器。然后使用伪元素完成缺失的边框：

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>

Answer 2

此矩形很可能是矢量图形，堆叠在背景图像的顶部。文本可能是其中的一部分，但文本可能是图像中的附加div。

另一种选择是较大的文本在顶部、左侧和右侧设置了边框，副文本具有负上边距以及定义了边框和宽度的 ：：before 和 ：：after 伪元素