这是一个使用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>
问题是在标志的顶部边界上获得差距.此外,这整个容器必须有响应.
任何帮助将不胜感激.
解决方法
您可以使用多个线性渐变图像作为父div容器的背景,如下面的代码片段所示.这是实现它的一种方法,而不添加任何额外的元素.
背景不一定是纯色.这种方法可以支持透明度.您唯一需要注意的是,由于我们在线性梯度中使用百分比,因此高度/宽度增加(反之亦然)将会增加间隙.您可以使用“完整页面”选项看到这一点.
文本容器上的变换：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%),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>
