Линейный градиент - сделать пунктирную вертикальную линию

Question

Итак, я просмотрел все и попробовал пару вещей, но я просто пытаюсь создать пунктирную вертикальную линию. Аналогично тому, если вы сделали границу пунктирной.

Закрывает я получил:

background: linear-gradient(transparent, #ffffff) no-repeat 80%/2px 100%, linear-gradient(#000, #000) no-repeat 80%/2px 100%;

JSFiddle: https://jsfiddle.net/m9wtrdgz/

И да, я хочу, чтобы линия находилась на 80% месте;]

Answer 1

Вы ищете repeating-linear-gradient:

body {
  margin:0;
  height:100vh;
  background:
    repeating-linear-gradient(to bottom,transparent 0 4px,black 4px 8px) 80%/2px 100% no-repeat;
}

А если вы хотите получить блеклый цвет, вы можете комбинировать его с линейным градиентом:

body {
  margin:0;
  height:100vh;
  background:
    repeating-linear-gradient(to bottom,transparent 0 4px,#fff 4px 8px),
    linear-gradient(to bottom,black,transparent);
  background-size:2px 100%;
  background-position:80%;
  background-repeat:no-repeat;
}

Answer 2

Вам нужно использовать местоположение в градиенте, чтобы создать пунктирную линию, а затем расположить элемент, содержащий линию, в нужном месте.

В этом случае я использовал элемент pseudo в качестве строки «контейнер» и поместил его абсолютно на 80% от левого края.

Изменение размера элемента (ширина / высота) для изменения ширины линии.

background-size изменяет размер тире / интервал

.content {
  width: 400px;
  height: 150px;
  padding: 5px;
  background-color: #ddd;
  position: relative;
}
.content:before {
  content: '';
  position: absolute;
  top:70%;
  left:0;
  right:0;
  height: 1px;
  background-image: linear-gradient(90deg, #000, #000 75%, transparent 75%, transparent 100%);
  background-size: 10px 1px;
}
.content:after {
  content: '';
  position: absolute;
  top:0;
  left:80%;
  bottom:0;
  width: 5px;
  background-image: linear-gradient(0deg, orange, orange 75%, transparent 75%, transparent 100%);
  background-size: 1px 20px;
}

<div class="content">
  :before = horizontal line<br />
  :after = vertical line
</div>