5

Quisiera saber como podría crear un border top de distintos colores. Colocare la imagen de referencia abajo.Quiero que se vea así

2
  • 3
    bienvenido al sitio Joel, te recomiendo que leas este par de enlaces: es.stackoverflow.com/help/how-to-ask es.stackoverflow.com/tour para que te familiarices con el sitio. La pregunta que has formulado tiene un alto porcentaje de ser cerrada porque: 1. Carece de intento de tu parte por querer resolver el problema. 2. Hay diversas maneras de hacer eso ya que no estás definiendo los límites necesarios. 3. Las posibles respuestas que te de la comunidad pueden no encajar a lo que tienes en mente (referido al punto anterior). Saludos :D
    – fredyfx
    el 22 nov. 2016 a las 17:04
  • Tip: css-tricks.com/examples/GradientBorder el 29 dic. 2016 a las 18:56

5 respuestas 5

7

Se podría realizar con la función: linear-gradient()

.color {
  position: relative;
  width: 500px;
}

.color:before {
  content: "";
  background-image: -webkit-linear-gradient(0deg, blue 0, blue 100px, green 100px, green 200px, purple 200px, purple 300px, orange 300px, orange 400px, red 400px);
  background-image: -ms-linear-gradient(0deg, blue 0, blue 100px, purple 100px, purple 200px, green 200px, green 300px, orange 300px, orange 400px, red 400px);
  background-size: 500px;
  position: absolute;
  left: 0px;
  right: 0px;
  height: 5px;
}
<div class="color"></div>

3

Esta sería una forma de hacerlo:

.line div {
  border: 1px solid;
  float: left;
}

#red {
  border-color: red;
}

#green {
  border-color: green;
}

#purple {
  border-color: purple;
}
<div class="line">
  <div id="red" style="width:30%;"></div>
  <div id="green" style="width:30%;"></div>
  <div id="purple" style="width:30%;"></div>
</div>

demo

2
  • Gracias, funcionó!
    – Joe68
    el 22 nov. 2016 a las 17:33
  • muy bien, lo único que queda es jugar con los porcentajes y el numero de divs para agregar o quitar colores
    – Rene Limon
    el 22 nov. 2016 a las 17:34
2

Si estas usando CSS3 podrías usar la propiedad border-image junto con la función linear-gradient.

Simplemente, tendrías que indicar la dirección que va a tomar el linear-gradient, en este caso, de izquierda a derecha, y asignar los rangos que va a tener cada color. Para el primer y el último color no es necesario que indiques su inicio o su fin respectivamente.

Ejemplo:

.divPersonalizado {
  width: 300px;
  height: 300px;
  border-top: 5px solid;
  border-image: linear-gradient(to right, blue 20%, green 20%, green 40%, purple 40%, purple 60%, orange 60%, orange 80%, red 80%) 1;
}
<div class="divPersonalizado">
  Este div tiene un borde de color arcoiris
</div>

0

Este código será de mucha utilidad:

.box {
   width:100%;
   height:20px;
   background: linear-gradient(to right, yellow 50%, blue 50%, blue 75%, red 75%);
   background-size: 100%;
}
<div class="box" ></div>

Solamente con CSS se puede pintar todo el background. Solo una línea de código:

body {
  background: linear-gradient(to right, white 40%, red 40%, red 50%, white 50%);
}
0
<body>

<div></div>
Esta es una linea div con diferentes colores

</body>
Se puede usar un div para que sea una línea 
<style> 
div{
//le puedes dar al div un alto de 3px para que se vea 
mejor
height:5px;
background-image:linear-gradient(to 
right,navy,red,orange,green,yellow,brown,skyblue); 
}
</style>

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.