Une barre noire verticale s'affiche au milieu de l'élément à différentes résolutions lors de l'utilisation d'un gradient de

Une barre noire verticale s'affiche au milieu de l'élément à différentes résolutions lors de l'utilisation d'un dégradé. Il apparaît dans "webkit" navigateurs (Firefox est une exception).

Mon code HTML:

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

Le code 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;
}

Ici, c'est que deuxième background la propriété est pourquoi il apparaît (linear-gradient).

Merci d'avance pour les réponses! Désolé pour mon anglais.