Verticale nera viene visualizzata la barra nel mezzo dell'elemento a diverse risoluzioni quando si utilizza un gradiente

Verticale nera viene visualizzata la barra nel mezzo dell'elemento a diverse risoluzioni quando si utilizza un gradiente. È visualizzato in "webkit" browser (Firefox è un'eccezione).

Il mio codice HTML:

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

Il codice 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;
}

È qui che secondo background la struttura è ragione per cui è visualizzato (gradiente lineare).

Grazie in anticipo per le risposte! Mi dispiace per il mio inglese.