Вот образ проекта, который я пытаюсь достичь только с помощью 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 standard dummy.</p>
</div>
</div>