要素を斜めにしたり回転させたりすると、境界線にわずかな線が表示されるため、境界線またはボックス シャドウと同じ方法を実現するには、グラデーションを使用して正方形の要素を作成する必要があります。
私が得ることができる限り、方向の異なる複数のグラデーションを使用していますが、それは不可能のようです（または方法がわかりません）
私はこれを試しましたが、動作しません (ベンダープレフィックスを使用):
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 疑似要素を使わないアプローチが必要です。
ありがとう！