在css中正确堆叠线性渐变

我有一个按钮，想抄近路

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

---

上述代码仅在存在一个“线性梯度”时有效

渐变采用全宽/全高，因此它们彼此重叠，您需要调整每个渐变的大小，并且不要忘记

无重复

我改变了颜色，使它更明显


div{
宽度：200px；
高度：200px；
背景：
线性渐变（135度，透明5px，#834444 0）左上角，
右上角的线性梯度（225度，透明5px，#4a4483 0），
线性梯度（315度，透明5px，#7a8344 0）右下角，
线性渐变（45度，透明5px，#44834e 0）左下角；
背景重复：无重复；
背景大小：50%50%；
/*如果只指定了一个值，则会为所有其他背景复制该值*/
}
什么是“它有效”？你在看什么？我们能看一眼吗？如果你不正确地将它们分层，它们会延伸到其他角落。您需要调整它们的尺寸。非常感谢！我不得不把“背景大小：51% 50%”，因为否则我有一个白色的垂直线在元素的中间。但它现在起作用了。：-）