Как бы вы сверстали такой элемент?

Question

[Альберт]

Имеется линия и под ней неравномерное свечение.
С box-shadows не получается сделать такое. Получается похожее, но не такое.
Есть рабочий вариант c 3д трансформациями прямоугольника в трапецию, перспективой, и box-shadows и тд, но это выглядит костылем, и к тому же может сказаться на производительность на мобильниках.
Еще есть вариант просто накатить сверху прозрачное изображение с этим эффектом, но это будем слишком просто и к тому же лишний траффик.
Может кто подкинет идейку свежую? Да такую чтобы ie10+ поддерживал


Имеется ввиду линия со светлым свечением

Comments

[Шохрух Шаймардонов]

Svg/canvas

Answer 1

[smilingcheater]

Блок с overflow: hidden, в нём радиальный градиент в виде сильно вытянутого эллипса из белого в прозрачный, сдвинутый вверх в невидимую часть.

Comments

[origami1024]

что-то не похоже, середина сильно насыщена у эллипса

[profesor08]

origami1024, больше элипс, шире тень, прозрачнее цвет,

[Альберт]

origami1024, я немного модифицировал его вариант с box-shadows и все получилось почти как на макете)

[Альберт]

Спасибо, хорошее решение.

[origami1024]

Альберт, запости тогда финальный вариант в кодепен/отрывком кода, чтобы ответ был полный