Фоновая позиция и размер фона не соответствуют элементу ⇐ CSS

[Anonymous]

Я пытаюсь разделить его на 4 части по горизонтали, используя размер и положение, но оно не подходит.
Можно ли добиться этого этим методом?

Код: Выделить всё

.ui-button {
display: block;
padding: 12px 10px;
width: 100%;
height: 50px;
border: none;
border-radius: 2em;
text-align: center;
text-decoration: none;
font-size: 22px;
line-height: 1;
flex-shrink: 0;
}
.ui-button {
border: 3px solid #fff;
border-radius: 2em;
background: #e97820;
color: #fff;
font-weight: 600;
}
.ui-button{
background:
linear-gradient(180deg, #880021 50%, #B97A57 50%),
linear-gradient(0deg, #880021 50%, #B97A57 50%),
linear-gradient(180deg, #880021 50%, #B97A57 50%),
linear-gradient(0deg, #880021 50%, #B97A57 50%);
background-position: 0% 0%, 25% 0%, 50% 0%, 100% 100%;
background-size: 25%;
background-repeat: no-repeat;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/792 ... it-element