使用css实现两边细中间粗的渐变直线

html：

<div class="Line"></div>

css：

.Line{
        width:1px;
        height:500px;
        background:linear-gradient(244deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    }

效果图：

左边细右边粗的渐变直线：

html:

<div class="Line"></div>

css：

.Line{
       width: 80px;
      	height: 1px;
        background:linear-gradient(244deg, rgba(0,255,255,1) 50%,rgba(255,255,255,0) 100%);
    }

效果图：

右边细左边粗的渐变直线：

html:

<div class="Line"></div>

css：

.Line{
       width: 80px;
      height: 1px;
       background:linear-gradient(244deg,rgba(255,255,255,0) 0%,rgba(0,255,255,1) 50%);
    }

效果图：