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

作者：机加工N_918 | 来源：互联网 | 2023-05-18 22:16

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

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

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

enter image description here

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.

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

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;
}


  
    content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.

jsFiddle

的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.

任何帮助将不胜感激。

4 个解决方案

#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.

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

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.

变换：文本容器上的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%);
}



  
    content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.
  
  
  Text
  Text

#2

Here is my solution:

这是我的解决方案：

Add one helper element on each side of the box.
在盒子的每一侧添加一个辅助元素。
Place the logo/text inside the helper element.
将徽标/文本放在辅助元素中。
Use pseudo elements to add horizontal/vertical lines before and after the logo/text
使用伪元素在徽标/文本之前和之后添加水平/垂直线

body {
  color: white;
  background: black;
}
.box {
  position: relative;
  margin: 100px auto 0;
  padding: 80px;
  width: 50%;
}
/**** border helpers ****/
.border {
  position: absolute;
  background-color: rgba(255, 255, 255, .5);
  /* disable these rules to understand what is going on */
  background-color: transparent;
  overflow: hidden;
}
.border-t,
.border-b {
  left: 32px;
  right: 32px;
  height: 64px;
}
.border-t {
  top: 0;
}
.border-b {
  bottom: 0;
}
.border-l,
.border-r {
  top: 32px;
  bottom: 32px;
  width: 64px;
}
.border-l {
  left: 0;
}
.border-r {
  right: 0;
}
/**** logo and text ****/
.border > span {
  position: absolute;
  text-align: center;
}
.border-t span,
.border-b span {
  top: 0;
  left: 10%;
  height: 100%;
}
.border-l span,
.border-r span {
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
/**** lines ****/
.border span::before,
.border span::after {
  content: "";
  position: absolute;
}
/**** lines (horizontal) ****/
.border-t span::before,
.border-b span::before,
.border-t span::after,
.border-b span::after {
  top: 50%;
  border-top: 1px solid white;
  width: 999px;
}
.border-t span::before,
.border-b span::before {
  right: 100%;
}
.border-t span::after,
.border-b span::after {
  left: 100%;
}
/**** lines (vertical) ****/
.border-l span::before,
.border-r span::before,
.border-l span::after,
.border-r span::after {
  left: 50%;
  border-left: 1px solid white;
  height: 999px;
}
.border-l span::before,
.border-r span::before {
  bottom: 100%;
}
.border-l span::after,
.border-r span::after {
  top: 100%;
}


  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum finibus ligula sit amet gravida. Sed scelerisque dapibus tempus.
    Curabitur ipsum dui, facilisis at interdum et, feugiat eget tortor. Nunc sodales diam nec nunc sollicitudin, non blandit diam lacinia.
  
  
  
  Integer rhoncus nunc dui, eget.
  Curabitur quis mauris eros. In hac habitasse.

#3

Demo

演示

html

HTML


    
        content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.
        text
        text
        text
        text

css

CSS

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;
}
.inner {
    position: relative;
    border: 2px solid #fff;
}
.inner div {
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 50px;
    background: #000;
    color: #fff;
}
.one {
    top: 0;
    bottom: 0;
    margin: auto;
    left: -25px;
    width: 50px;
    text-align: center;
}
.two {
    top: 0;
    bottom: 0;
    margin: auto;
    right: -25px;
    width: 50px;
    text-align: center;
}
.three {
    top: -15px;
    margin: auto;
    left: 25px;
    width: 50px;
    text-align: center;
}
.four {
    bottom: -15px;
    margin: auto;
    right: 25px;
    width: 50px;
    text-align: center;
}

#4

I doubt there is a native way to cut borders, so you have to give the illusion that it is a border with more containers.

我怀疑是否存在切割边界的原生方式，所以你必须给出一个错觉，即它是一个带有更多容器的边界。

Something like this should suffice. Nothing fancy, so browser support won't be an issue either:

这样的事情应该足够了。没什么好看的，所以浏览器支持也不会成为问题：

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    position: relative;
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.borderColour {
     background-color: #fff;   
}
.borderTopLeft {
     position: absolute;
    top:0;
    left: 0;
    width: 10%;
    height:2px;
}
.borderTopRight {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 2px;
    height: 45%;
}
.borderRightBottom {
    position: absolute;
    bottom:0;
    right: 0;
    width: 2px;
    height:45%;
}
.borderLeftTop {
    position: absolute;
    top:0;
    left: 0;
    width: 2px;
    height: 45%;
}
.borderLeftBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 2px;
    height:45%;
}
.borderBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height:2px;
}


    
    
    
    
    
    
    
    
        content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.

http://jsfiddle.net/ddn53xsf/3/