Css 左上方向的多个线性渐变

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

据我所知，使用多个不同方向的渐变是不可能的（或者我不知道怎么做）

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

已经创建了一个显示想要实现什么以及为什么不能使用边框（框阴影仍然是相同的问题）

我也尝试过使用：after，它可以工作，但我需要一种不使用：after伪元素的方法

---

谢谢

尝试使用中间颜色设置为透明的：after元素。

多亏我解决了这个问题

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

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%);

}

---

Codepen

这不能用一个元素完成（到目前为止）。您必须使用第二个elment，如

：在
之后，您是否尝试过相同的代码，但在第一个渐变中使用
透明
而不是
红色
？谢谢@IlyaStreltsyn，现在它可以工作了，没有了：after，在第一个渐变中设置透明，在第二个渐变中设置颜色。现在我理解了逻辑，它似乎是对的。我已经尝试过了，它很有效，添加了一个left:-1px和width+=2px，但如果可能的话，我仍然希望不使用：after。
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%);