Как сделать полоску со стрелкой разной ширины по бокам на CSS?

Question

[pigarevka]

Подскажите пожалуйста, как сделать такую белую полоску со стрелкой.
Проблема в том, что она разной ширини слева и справа и получается эффект приближения.

Уже весь интернет перерыла, не могу ничего похожего даже найти. Буду очень благодарна за помощь.

Comments

[twobomb]

svg?

Answer 1

[Ankhena]

Вариантов не один:
1. Сразу SVG
2. Поворачиваете стрелку и рисуете множественный градиент
3. Трансформации и overflow. Например, так https://jsfiddle.net/novh5dz4/
Рамочку оставила для наглядности.

Comments

[Александр Епихин]

Если вы не против, то я немного дополнил ваш вариант №3 и добавил в него тень https://jsfiddle.net/leshiple/9qk5thpn/11/

[Ankhena]

Александр Епихин, я вообще только за

[pigarevka]

Александр Епихин, Ankhena, спасибо большое)) спасли)