这是一个使用CSS实现的设计图像.
如何为容器div实现这样的边框,以便我可以在间隙之间放置透明标志和文本.这个设计将在视频背景下进行.黑色背景仅供说明之用.
到目前为止,我试图实现像这样的测试：
@H_301_6@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; } @H_301_6@<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％)用于在空间内的内容的垂直和水平居中.
@H_301_6@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%); } @H_301_6@<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>