Search code examples
htmlcssgradientlinear-gradients

A vertical black bar appears in the middle of the element at different resolutions when using a gradient

A vertical black bar appears in the middle of the element at different resolutions when using a gradient. It's appears in "webkit" browsers (Firefox is an exception).

My HTML code:

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

CSS code:

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

Button with black vertical line at center

Here is that second background property is reason why it's appears (linear-gradient).

Thanks in advance for answers! Sorry about my english.

Solution

  • I think it's because of background-size: 50% 100%;

    Just change the value to be greater than 50%.

    Try: background-size: 51% 100%;