правильная укладка линейных градиентов в css

Question

У меня есть кнопка и я хочу обрезать все углы.

#top .avia-slideshow-button {
   background: 
       linear-gradient(135deg, transparent 5px, #44834e 0) top left,
       linear-gradient(225deg, transparent 5px, #44834e 0) top right,
       linear-gradient(315deg, transparent 5px, #44834e 0) bottom right,
       linear-gradient(45deg,  transparent 5px, #44834e 0) bottom left;
}

Приведенный выше код работает только при наличии одного «линейного градиента».

Answer 1

Градиенты имеют полную ширину / высоту, поэтому они перекрывают друг друга. Вам нужно изменить размер каждого из них, и не забудьте no-repeat.

Я изменил цвета, чтобы сделать их более заметными.

div{
    width: 200px;
    height: 200px;
    background: 
        linear-gradient(135deg, transparent 5px, #834444 0) top left, 
        linear-gradient(225deg, transparent 5px, #4a4483 0) top right, 
        linear-gradient(315deg, transparent 5px, #7a8344 0) bottom right, 
        linear-gradient(45deg, transparent 5px, #44834e 0) bottom left;
    background-repeat: no-repeat;
    background-size:50% 50%; 
    /* if only one value is specified it is then copied for all other backgrounds */
}

<div></div>