Градиентная линия с пунктирным узором

Мне нужно создать пунктирную линию с линейным градиентом. Мне удалось создать пунктирную линию, используя <hr /> и следующий стиль:

line {
  border: 0px;
  border-bottom: 2px dashed;
}

И я также знаю, что для получения градиента мне нужно:

background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));

html css linear-gradients
person Ela    schedule 10.09.2015    source источник
comment
С какой проблемой вы столкнулись?   -  person m4n0    schedule 10.09.2015
comment
@Ela: Взгляните на фрагмент градиента в моем ответе здесь - stackoverflow.com/questions/2771171/. В нем используется 4 градиента (по одному для каждой стороны), но вам нужен только один :)   -  person Harry    schedule 10.09.2015
comment
Я изменил заголовок, чтобы лучше прояснить ваш вопрос (на основе вашего самостоятельного ответа). Не стесняйтесь откатывать, если считаете, что это вводит в заблуждение / неверно.   -  person Harry    schedule 10.09.2015

Ответы (3)


arrow_upward
19
arrow_downward

Судя по коду в вашем собственном ответе, похоже, что вам нужна линия, которая сама по себе является градиентом (от синего к зеленому), а также имеет пунктирный узор. Этого невозможно добиться с помощью одного изображения градиента, потому что нельзя ввести пробелы в середине градиента.

Однако вы можете добиться того же эффекта без использования каких-либо дополнительных элементов (реальных / псевдо), используя укладку background-image, как в приведенном ниже фрагменте:

.line {
  margin-top: 50px;
  height: 2px;
  background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
  background-size: 16px 2px, 100% 2px;
}

body{
  background-color: #223049;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>

Второй градиент в приведенном выше фрагменте такой же, как и в вашем ответе (за исключением использования последнего стандартного кроссбраузерного синтаксиса). Первый градиент - это замена вашего hr, и это не что иное, как повторяющийся градиент, который прозрачен для 50% ширины изображения и цвета, который вам нужен для остальных 50%. background-size первого изображения градиента устанавливается как 16px 2px, где 16 пикселей - это ширина, а 2 пикселя - высота. Ширина изображения определяет ширину штрихов. Высота (2px) определяет толщину линии.

person Harry    schedule 10.09.2015
comment
Я хочу прозрачное пространство между тире, как мне этого добиться? - person iamawebgeek; 22.03.2018

arrow_upward
2
arrow_downward

Спасибо за помощь. Наконец-то он заработал сам, но вставил пунктирную линию в div. <hr/> имеет цвет элемента, в котором я хочу эту линию, создавая эффект «скрытия» части линии. Вот код, но если у кого-то есть хороший ответ, мне любопытно.

.line { 
height: 2px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#00b9ff), to(#59d941));
}

.dashed {
    border: 0px;
    border-bottom: 2px dashed;
    border-color: #223049;
}

<div class="line">
    <hr class="dashed"/>
</div>

jsFiddle

person Ela    schedule 10.09.2015
comment
Итак, вы ищете градиент, в котором черточки черного цвета, а другие - от синего к зеленому? - person Harry; 10.09.2015

arrow_upward
0
arrow_downward

Используя pseudo-elements, вы можете достичь пунктирной границы и также можете настроить ее в любом направлении (описано для одной стороны в моем JSFiddle).

Вот мой JSFiddle

HTML

<div class="dashed-border"></div>

CSS

.dashed-border {
  position: relative;
  border-bottom: 3px dashed #fff;
}


.dashed-border::before {
  content:"";
  border-top:3px dashed #FFF;
  position: absolute;
  top:0;
  left:6px;
  right:0;
  width: 100%;
  height: 3px;
  z-index: 2;
}
.dashed-border:after {
   content:"";
   position: absolute;
   bottom: -3px;
   left: -3px;
 }
.dashed-border::after {
   right: -3px;
   height: 3px;
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
   background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
   background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
   background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
   background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
   background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
  }

Надеюсь, это сработает для вас.

person vivekkupadhyay    schedule 10.09.2015