html - フェード縦線

Question

私がやろうとしているのは、CSSでこの太い線のようなものを作ることです.

1. CSS でその行を div の右端になるように再作成するにはどうすればよいですか?
2. 行の一番上をフェードアウトするにはどうすればよいですか (このように見えます)?

ありがとう。

Answer 1

線形勾配が使用されても問題ない場合:

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;
}