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

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

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

Answer 2

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

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>

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

2 个答案: