css - 多个线性渐变左上方向

Question

我需要创建一个带有渐变的方形元素以实现与边框或框阴影相同的方式，因为当倾斜和旋转元素时，边框上会出现一条细线。

据我所知，使用具有不同方向的多个渐变，但看起来这是不可能的（或者我不知道如何）

我已经尝试过，但它不起作用（使用它的供应商前缀）：

  background:
     linear-gradient( top, white 0%, white 5%, red 5%, red 95%,white 95%, white 100%),
     linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%)
  ;

已经创建了一个codepen来显示想要实现的目标以及为什么不能使用边框（box-shadow 仍然是同样的问题）

我也尝试过使用 :after 并且它可以工作，但我需要一种没有 :after 伪元素的方法。

谢谢！

Answer 1

感谢 Ilya Streltsyn，我解决了这个问题。

问题是，当使用渐变时，代码的顺序很重要。所以基本上会起作用：

background: 
    -webkit-linear-gradient( top,white 0%, white 5%, transparent 5%, transparent 95%,white 95%, white 100%),
    -webkit-linear-gradient( left,white 0%, white 5%, red 5%, red  95%,white 95%, white 100%);

}

在这里写代码

Answer 2

尝试使用 :after 元素并将中间颜色设置为透明。