Как вы знаете из названия, я хочу сделать такую строку с помощью css вот так.

enter image description here

Кто-нибудь может мне помочь?

Большое спасибо! :)

-1
Habie Smart 23 Окт 2019 в 16:47

2 ответа

Лучший ответ

Вот и все, вот оно:

<!DOCTYPE html>
<html>

<head>
  <style>
    .verticalLine{
      height: 300px; /* Length of your line */
      border-left: 2px solid transparent;
      filter: blur(1px); /* Amount of bluryness */
      border-image: linear-gradient(white, black, white) 10 stretch;
    }
  </style>
</head>

<body>
  <div class="verticalLine"></div>
</body>

</html>

Ответ робота Tacchino почти идеален, добавьте немного размытия, и вы получите именно то, что было запрошено.

Если вы довольны этим решением, отметьте его как ответ (отметьте галочкой), чтобы другие знали, что оно решено. Спасибо.

0
JohnnyAwesome 23 Окт 2019 в 14:50

Я сделал таким образом:

.line {
  height: 100px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(white,black,white) 10 stretch;
}
<div class="line">
</div>

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

0
Tacchino Robot 23 Окт 2019 в 14:27
58524355