How to add border to a container with transparent gaps in between

Question

Here is an image of the design which I am trying to achieve with only CSS.

How do I achieve such border for the container div so that I can place transparent logo and text in between the gaps. This design will go on a video background. The black background is just for illustration purpose.

So far I have tried to achieve something like this as a test:

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

The problem is to get the gap on top border as well for the logo. Also this whole container must be responsive.

Any help will be appreciated.

Answer 1

You can use multiple linear-gradient images as background for the parent div container like shown in the below snippet. This is one way to achieve it without adding any extra elements.

The background need not be a solid color. This approach can support transparency. The only thing you would need to make note of here is that since we are using percentages in the linear-gradient, the gap will increase as the height/width increases (and vice-versa). You can see this by using the "Full Page" option.

The transform: translateX(-50%), translateY(-50%) on the text containers are for vertical and horizontal centering of the content within the space.

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>