1

Tengo unos tabs, que se ven como estas cajas: yo quisiera eliminar el border top de la caja 2, solo en los primeros 100px para que parezca que la caja tiene un único borde.

A alguien se le ocurre como puedo hacer algo asi? (adjunto imagen de lo que busco por si no se entiende)

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

introducir la descripción de la imagen aquí

2 respuestas 2

2

Para que funcione, necesitas:

  • Poner el borde inferior de la pestaña en blanco, para "borrar" esa parte de borde del contenedor
  • Tanto la pestaña como el contenedor deben tener posición relativa
  • Con la propiedad z-index, se posiciona la pestaña (z-index mayor) sobre el contenedor (z-index menor)
  • Finalmente, el contenedor se sube 1px, que es el ancho del borde para que pueda rellenarse con blanco la zona que corresponde a la pestaña

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

0
1

Un menú de tipo tabs no se estructura así.

Pero como no se la finalidad ni el uso, lo mejor que ize es darle un alto fijo (al supuestamente botón) que és caja1 y de ahí mover hacia abajo el mismo gancho del borde: 1px.

Dándole un ancho fijo, y de un borde de 1px, con posición con z-index, moví para abajo 1px (el mismo por del borde) para ocultar el borde de la caja2.

Es lo que se me ocurrió. Pero hay que llevar en cuenta el contenedor padre, la anchura y response, y algunas cosas más que solo tú sabrás

.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
  • jaja era exactamente lo que estaba haciendo. Te agradezco, dado que la caja 1 puede tener un alto y ancho fijo siempre, la solucion me sirve.
    – Agustin G.
    Commented el 12 ago. 2022 a las 16:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.