如何在容器之间添加透明间隙的边框

Question

这是我试图用CSS实现的设计图像.

如何为容器div实现此类边框,以便我可以在间隙之间放置透明徽标和文本.此设计将在视频背景上进行.黑色背景仅用于说明目的.

到目前为止,我试图通过测试来实现这样的目标:

body {
  background: black;
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  margin-top: 60px;
  width: 50%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.steps-frame-1 {
  border: 0;
  position: relative;
}
.steps-frame-1::after,
.steps-frame-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 45%;
  border: 2px solid #fff;
}
.steps-frame-1::before {
  bottom: 0;
  border-top: 0;
}
.steps-frame-1::after {
  border-bottom: 0;
  top: 0;
}

<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
</div>

的jsfiddle

问题是如何在徽标的顶部边界上获得差距.整个容器也必须有响应.

任何帮助将不胜感激.

Answer 1

您可以使用多个linear-gradient图像作为父div容器的背景,如下面的代码段所示.这是实现它的一种方法,无需添加任何额外元素.

背景不一定是纯色.这种方法可以支持透明度.你需要特别注意的是,由于我们使用的是百分比,因此linear-gradient随着高度/宽度的增加,间隙会增加(反之亦然).您可以使用"完整页面"选项查看此内容.

在transform: translateX(-50%), translateY(-50%)对文本容器的空间中内容的垂直和水平居中.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  position: relative;
  height: 30vw;
  width: 75vw;
  margin: 20px;
  background-image: linear-gradient(to right, beige 5%, transparent 5%, transparent 20%, beige 20%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%);
  background-size: 100% 2px, 2px 100%, 2px 100%;
  background-position: top left, top left, top right;
  background-repeat: no-repeat;
  border-bottom: 2px solid beige;
}
.left-text,
.right-text {
  position: absolute;
  top: 50%;
  height: 20px;
  color: beige;
}
.left-text {
  left: 0%;
  transform: translateX(-50%) translateY(-50%);
}
.right-text {
  right: 0%;
  transform: translateX(50%) translateY(-50%);
}
.top-text {
  position: absolute;
  top: 0%;
  left: 12.5%;
  content: url(http://www.planetcassandra.org/wp-content/uploads/2014/03/GitHub_Logo.png);
  width: 15%;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
  </div>
  <div class='top-text'></div>
  <div class='left-text'>Text</div>
  <div class='right-text'>Text</div>
</div>