如何在 html/css 中创建矩形？答案

【问题标题】：How to create rectangle in html/css?如何在 html/css 中创建矩形？
【发布时间】：2018-06-12 17:49:08
【问题描述】：

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

【问题讨论】：

你的代码在哪里？你试过什么？
在上面添加了我的代码

标签： css html styles border

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：