Можно совместить идею использования градиентов на ::before и ::after и старый хак с padding в процентах, чтобы получить универальную конструкцию, которая работает на любой ширине родительского элемента и при любом содержимом:
codepen.
Также можно использовать calc для вычисления переходных точек этих градиентов (если вам нужно сохранять ширину полоски одинаковой при изменении ширины элемента), но нужно помнить про IE, который не очень это умеет, и в таком случае придется подставлять подпорку для него.
