Svislý černý pruh se objeví ve středu prvku v různých rozlišeních při použití gradientu

Svislý černý pruh se objeví ve středu prvku v různých rozlišeních při použití gradientu. To se zobrazí v "webkit" prohlížečů (Firefox je výjimka).

Můj HTML kód:

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

CSS kód:

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

Tady je ten druhý background nemovitost je důvod, proč se zdá, (linear-gradient).

Díky předem za odpovědi! Omlouvám se za moje angličtina.