Создавать край различных цветов тип палитра или радуга

Я хотел бы знать, как он мог бы создавать border top различных цветов. Я размещу изображение ссылки внизу.Quiero que se vea así

4
задан 29.12.2016, 20:54
2 ответа

PodrГ, - чтобы реализовывать с нею 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>
5
ответ дан 24.11.2019, 12:28

Эта serГ - в способ это делать:

.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
ответ дан 24.11.2019, 12:28
  • 1
    Спасибо, funcionó! – Joel Sulca Cordova 22.11.2016, 19:33
  • 2
    очень хорошо, ú nico, что остается, состоит в том, чтобы играть с процентным содержанием и числом divs, чтобы добавлять или снимать цвета – Rene Limon 22.11.2016, 19:34

Если ты используешь CSS3 ты мог бы использовать свойство border-image вместе с функцией linear-gradient.

Просто, ты был бы должен показывать адрес, который направит linear-gradient, в этом случае, с левой стороны до правой стороны, и распределять ранги, которые будут у каждого цвета. Для первого и последнего цвета не необходимо, чтобы ты показал Ваше начало или Ваш конец соответственно.

Пример:

.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>
1
ответ дан 03.12.2019, 18:58

Теги

Похожие вопросы