Юрий

Это чудесное изобретение гугла называется Scroll anchoring. Чтобы отключить, добавьте в CSS:

body {
  overflow-anchor: none;
}

Само собой не работает, вы же сначала задаёте один background, с градиентом, а следом переопределяете его. Сделайте всё через запятую в одном свойстве:

background: url(http://placehold.it/350x50) 0 0 no-repeat,
      url(http://placehold.it/350x50) center 70px no-repeat,
      url(http://placehold.it/350x50) 100% 140px no-repeat,
      linear-gradient(to left, #ffffff, #00ff00, #ffffff);

Стрелку можно делать как угодно, главное здесь — флекс.

Если обязательно нужно сделать именно через бордер, можете добавить псевдоэлементу трансформ с нужными пропорциями:

transform: scaleX(0.52);
transform-origin: left;

Как вариант.

Можно через псевдоэлементы + transform: rotate(45deg), но тогда скорее всего размеры псевдоэлемента придётся задавать в явном виде.

Я бы скорее всего просто сделал стрелку через SVG.

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

Проблема, судя по всему, из-за того, что браузер картинку без содержимого (с неправильным путём к файлу или вообще без него, как в данном случае) рисует как прямоугольник с бордером. Этот самый бордер и торчит у вас.
Если поменять на никак нельзя, можно либо выводить пустой PNG, либо добавить border: 1px solid transparent и соответственно скорректировать размеры элемента в пикселях.

Как-то так. Высоту, ширину и сдвиг относительно родительского элемента подберите, как вам нужно.

Вроде работает.

В вашем варианте с svg можно добавить rx='20':



Будет тоже не идеально, но ближе к нужному результату.