Vertical barra preta aparece no meio de um elemento em diferentes resoluções quando usando um gradiente

Vertical barra preta aparece no meio de um elemento em diferentes resoluções quando usando um gradiente. Ele aparece em "webkit" navegadores (Firefox é uma exceção).

Meu código HTML:

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

Código 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;
}

Aqui é que, segundo background propriedade é a razão pela qual ele aparece (linear-gradient).

Obrigado antecipadamente pelas respostas! Desculpe o meu inglês.