Question 43859 in Html Question posted in
Some basic documentation can be found here.

Hide border of overlaying divs – Html

Say I have these two div’s

overlaying divs

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

div {
  border: 1px solid black;
  width: 50px;
  height: 25px;
}
<div class="el-1">
</div>
<div class="el-2">
</div>

How can I make them look like this?

Overlayed divs

Doesn’t matter if we somehow merge them together or use SVGs but I need the background to stay transparent

Tags:

3

Answers


  1. 0

    There’s a workaround for this, which is using ::before Selector. gonna make a white square which will cover the lines of intersection two divs:

    div {
  border: 1px solid black;
  width: 50px;
  height: 25px;
}

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

.el-2:before {
  content: '';
  top: -0.8px;
  left: -0.8px;
  height: 15px;
  width: 19.5px;
  display: block;
  position: absolute;
  background: white;
}
    <div class="el-1">
</div>
<div class="el-2">
</div>
    Login or Signup to reply.
  2. 0

    You can approximate it using a drop-shadow on a parent element

    .el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

div {
  width: 50px;
  height: 25px;
  background: #fff; /* a background is needed*/
}

body {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}
    <div class="el-1">
</div>
<div class="el-2">
</div>
    Login or Signup to reply.
  3. 0

    The problem with the methods suggested which involve an overlay is that the part we want to get rid of is not an exact rectangle. There is a bit in the internal corners which must remain.

    This snippet takes a different approach. It uses mix-blend-mode to choose the lighter of the two colors within each div. This gets rid of the black border that lies within it.

    To ensure that the blending doesn’t also involve any other background the divs are put within a container which is isolated (new staking context).

    body {
  /*for demo to show isolation works */
  background: #eee;
}

.containner {
  isolation: isolate;
}

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

.el-1,
.el-2 {
  border: 1px solid black;
  width: 50px;
  height: 25px;
  background: white;
  mix-blend-mode: lighten;
  box-sizing: border-box;
}

</style>
    <body>
  <div class="container">
    <div class="el-1">
    </div>
    <div class="el-2">
    </div>
  </div>
</body>

    Note: as with the other methods suggested this means the rectangles have white rather than transparent backgrounds.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search