Tengo un problema en el que necesito hacer un borde inferior, con un desplazamiento determinado en CSS

Por ejemplo, en este JSFiddle, tengo un borde inferior negro.

https://jsfiddle.net/uexma4o6/343/

<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>

Pero quiero dar un desplazamiento a este borde negro sólido de 2px para que esté 5px por encima de donde está.

¿Es posible?

8
felipe 16 oct. 2018 a las 03:10

2 respuestas

La mejor respuesta

Esto se puede hacer con un gradiente lineal:

.box {
  background:
    linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
    lightcoral;
  width: 500px;
  height: 40px;
}
<div class="box"></div>

También puedes hacerlo así:

.box {
  background:
    linear-gradient(black,black) bottom/100% 2px no-repeat,
    lightcoral;
  border-bottom:5px solid lightcoral;
  width: 500px;
  height: 40px;
  box-sizing:border-box;
}
<div class="box"></div>

Otra idea con sombra de caja:

.box {
  background:lightcoral;
  border-bottom:2px solid black;
  box-shadow:0 5px 0 lightcoral;
  width: 500px;
  height: 40px;
}
<div class="box"></div>

Y con sombra insertada:

.box {
  background:lightcoral;
  box-shadow:
    0 -5px 0 lightcoral inset,
    0 -7px 0 black inset;
  width: 500px;
  height: 40px;
}
<div class="box"></div>
2
Temani Afif 16 oct. 2018 a las 00:52

Solución

https://jsfiddle.net/StephanieSchellin/j7pmxkc3/

Use CSS ::after para agregar un pseudo elemento que tenga el borde que está buscando. Luego mueva el pseudo elemento para colocarlo como desee. Este pseudo elemento siempre estará vinculado a su elemento raíz, pero aún debe tener en cuenta la modificación de @media cambios de consulta y demás.

Puede ver en la imagen de abajo que esta solución está superponiendo el pseudo elemento sobre el raíz. Puede optar por utilizar :: before o experimentar con otras configuraciones de posicionamiento para adaptarse a sus necesidades de diseño.

Siempre haga muchas pruebas entre navegadores cuando haga cosas de casos extremos como esta porque es posible que se encuentre con problemas con el modelo de caja.

enter image description here

Html

<div class='the-div'></div>

Css

.the-div {
  width:500px;
  height:40px;
  background-color:lightcoral;
  position: relative
}
.the-div::after {
  border-bottom: 2px solid black;
  content: '';
  width:500px;
  position:absolute;
  bottom:5px;
}

Otras lecturas

Consulte https://css-tricks.com/pseudo-element-roundup/. Hay muchas cosas interesantes que puedes hacer con pseudo elementos.

2
Stephanie Schellin 16 oct. 2018 a las 01:21