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

何を達成したいのか、なぜ境界線を使用できないのかを示すコードペンを作成しました(box-shadow はまだ同じ問題です)

私も :after を試してみましたが、うまくいきましたが、 :after 疑似要素を使わないアプローチが必要です。

ありがとう！