es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS gradiente de borde extiéndase a otra div

12 Jul, 2023 Programación

Quiero tener este tipo de resultado a continuación. Parece que no puedo encontrar ninguna fuente que explique cómo hacerlo. Solo encontré este tipo de código a continuación, pero no está extendiendo su color a otros divs.

.border-gradient {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

Enlace a la imagen

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resultado deseado, puedes utilizar las propiedades de CSS linear-gradient y background-clip, además de la propiedad border-image:

    .border-gradient {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, #743ad5, #d53a9d) 1;
  background-clip: padding-box;
}

    Explicación:
    – La propiedad border establece el ancho del borde y lo colorea de forma transparente.
    – La propiedad border-image utiliza un degradado lineal de izquierda a derecha como origen de la imagen del borde y establece su ancho en 1.
    – La propiedad background-clip hace que el color de fondo se extienda al área de relleno y no al área del borde.

    Al aplicar este código a tu elemento HTML, deberías ver un borde con un degradado que se extiende a otros divs con un color de fondo diferente.

    <div class="border-gradient">
  <h2>¡Hola Mundo!</h2>
</div>
<div style="background-color: white">
  ¡Hola Mundo!
</div>

    Puedes ajustar los colores y la dirección del degradado según sea necesario para lograr otros efectos.

Comments are closed.