Увядание вертикальной линии

Question

То, что я пытаюсь сделать, это сделать что-то вроде this thick line в CSS.

1. Как бы воссоздать эту строку в CSS так, чтобы она была границей справа от div?
2. Как бы сделать верхнюю часть линии затухающей (так это looks like this)?

Спасибо.

Answer 1

Посмотрите на это: http://codepen.io/MisterGrumpyPants/pen/yEzpd

ли это делать то, что вы ищете?

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

Answer 2

если линейно-градиент отлично с вами быть использованы:

http://codepen.io/anon/pen/AucdB

.fade { 
    padding:5px 15px; 
    background: 
    linear-gradient(180deg , white 30%, rgba(255,255,255,0)) repeat, 
    linear-gradient(90deg , black 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0)) no-repeat, 
    linear-gradient(90deg , rgba(255,255,255,0) 5px,black 5px, black 6px, rgba(255,255,255,0) 6px, rgba(255,255,255,0)) no-repeat; 
    background-color:white; 
}