Как сделать на css такие боковые линии?

Question

[WebforSelf]

Как сделать такие боковые линии, получается что по краям они тоньше и затухают. Раньше вставлял изображением, но по моему это костыльное решение.

Comments

[archelon]

псевдоэлементы с градиентом на бэкграунде
https://developer.mozilla.org/ru/docs/Web/CSS/line...

Answer 1

[Алексей Джо]

https://jsfiddle.net/Lqc6snhf/11/

<div></div>

div{
  position: relative;
  width: 300px;
  height: 300px;
}
div::before, div::after{
  content: '';
  display: inline-block;
  height: 100%;
  width: 1px; 
  background: linear-gradient(to top, #a2a8ae00, #a2a8ae, #a2a8ae00);
}

div::after{
  position: absolute;
  right:0;
}

Answer 2

[MamaLuyba]

Либо градиентом линейным бахнуть, либо через :before/:after припендюрить.