Pionowy czarny pasek pojawia się w środku elementu z różnych rozdzielczości przy użyciu gradientu

Przy użyciu gradientu w środku elementu pojawia się czarne pionowe linie w różnych rozdzielczościach. Pojawia się w przeglądarkach "webkit" (Firefox jest wyjątkiem).

Mój kod HTML:

<div class="button">Button</div>

Kod CSS:

.button {
  background: #007FEE;
  background: linear-gradient(
135deg, transparent 10px, #007FEE 0) top left, linear-gradient(
225deg, transparent 10px, #007FEE 0) top right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  color: #000;
  height: 40px;
}

To jest ta druga background właściwość-powodem, dla którego pojawia się (liniowo-градиентное).

Z góry dziękuję za odpowiedzi! Przepraszam za mój angielski.