Home / Questions / 551467
Accepted
Agustin G.
Asked: 2022-08-13 07:47:56 +0800 CST 2022-08-13 07:47:56 +0800 CST

Delete only the edges where the boxes touch

  • 772

I have some tabs, which look like these boxes: I would like to remove the border top of box 2, only in the first 100px so that it looks like the box has a single border.

Does anyone know how I can do something like this? (I attach an image of what I'm looking for in case you don't understand)

.caja1{
  border: 1px solid black;
  border-bottom: 0px;
  width: 100px;
}

.caja2{
  border: 1px solid black;
  width: 500px;
  height: 100px;
}
<div class="caja1">Caja 1</div>
<div class="caja2">Caja 2</div>

enter image description here

html

2 Answers

  1. Best Answer

    For it to work, you need:

    • Make the bottom border of the tab blank, to "erase" that border portion of the container
    • Both the tab and the container must have relative position
    • With the z-index property, the tab (higher z-index) is positioned on the container (lower z-index)
    • Finally, the container is raised 1px, which is the width of the border so that the area corresponding to the tab can be filled with white.

    .caja1 {
  /* Colocar encima: posición relativa, z-index mayor */
  position: relative;
  z-index: 10;
  border: 1px solid black;
  /* Borde inferior blanco */
  border-bottom: 1px solid white;
  /* Redondear solo esquinas superiores */
  border-radius: 8px 8px 0 0;
  width: 100px;
}

.caja2{
  /* Colocar debajo: posición relativa, z-index menor */
  position: relative;
  z-index: 9;
  /* Subir un pixel */
  top: -1px;
  border: 1px solid black;
  /* Redondear todas las esquinas, excepto superior izquierda */
  border-radius: 0 8px 8px 8px;
  width: 500px;
  height: 100px;
}
    <div class="caja1">Caja 1</div>
<div class="caja2">Caja 2</div>

    • 2

  2. A tabs type menu is not structured like this.

    But since I don't know the purpose or use, the best thing for ize is to give it a fixed height (to the supposed button), which it is caja1, and from there move the same border hook down: 1px.

    Giving it a fixed width, and a 1px border, with z-index positioning, I moved down 1px (the same as the border) to hide the border of the caja2.

    It's what occurred to me. But you have to take into account the parent container, the width and response, and some other things that only you will know

    .caja1{
  display: inline-block;
  border: 1px solid black;
  border-bottom: 0px;
  width: 100px;
  height: 30px;
  margin-bottom: -1px;
  z-index: 1;
}

.caja2{
  border: 1px solid black;
  width: 500px;
  height: 100px;
}

.caja1, .caja2 {
  background-color: #ccc
}
    <div class="caja1">Caja 1</div>
<div class="caja2">Caja 2</div>

    • 1