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

上面的代码只有在 "linear-gradient" 存在的情况下才有效。

Answer 1

渐变已满 width/height，因此它们相互重叠，您需要调整每个渐变的大小，并且不要忘记 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>

在 css 中正确堆叠线性渐变

stacking linear-gradients correctly in css

css

linear-gradients