CSS Border - How to make a subtract border?-CodePudding

im trying to create this kind of border, is there a way to do it with css? thanks for the help enter image description here

i have no idea how to even search for this...

CodePudding user response：

Here is one example using pseudo-elements.

body {
  background: #000;
}

div {
  height: 300px;
  border: 1px solid orange;
  position: relative;
  max-width: 600px;
  margin: auto;
}

div:after {
  position: absolute;
  top: -1px;
  left: 40%;
  transform: translateX(-50%);
  content: '';
  background: #000;
  width: 200px;
  height: 1px;
}

div:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0%;
  transform: translateX(-50%);
  background: #000;
  height: 100px;
  width: 3px;
}

<div></div>

CodePudding user response：

Probably the easiest approach is to have a div, with a border, and then set that div's position as relative. Then put 1 or more divs within that div positioned absolute and size them and position them to cover up parts of the border as shown above. Then put the div content on a higher z-level than those divs that cover part of the border

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 20px;
}

.card {
  position: relative;
  width: 75%;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  padding: 10px;
}

.block1 {
  position: absolute;
  z-index: 2;
  width: 50%;
  height: 2px;
  background-color: white;
  top: -2px;
  left: 10%;
}

.block2 {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 60%;
  background-color: white;
  top: 5%;
  left: -2px;
}

.content {
  z-index: 3;
}

<div >

  <div >
  
    <div ></div>
    <div ></div>
    
    <div >
      <h1>Something</h1>
      <h3>random text<h3>
      <hr>
      <h3>random text<h3>
      <hr>
      <h3>random text<h3>
      <hr>
      <h3>random text<h3>
      <hr>
      <h3>random text<h3>
      <hr>
      <h3>random text<h3>
    </div>
    
  </div>
  
</div>

Just mess around with the top and left values for the block1 and block2 classes to get the effect you would like