Vertical aparece una barra negra en el centro del elemento en diferentes resoluciones cuando se utiliza un gradiente de

Vertical aparece una barra negra en el centro del elemento en diferentes resoluciones cuando se utiliza un gradiente. Se aparece en "webkit" de los navegadores (Firefox es una excepción).

Mi 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;
}

Aquí es que la segunda background la propiedad es la razón por la que aparece (gradiente lineal).

Gracias de antemano por las respuestas! Lo siento por mi inglés.