Javascript 斜角阴影边框

我正在尝试在CSS中创建一个斜角阴影边框

现在它的工作，我有几个图像左上角，左下角，右下角等。。。。这是一个非常糟糕的解决方案，我相信在CSS或JS中有更好的解决方案是可能的

有了按钮，它就不工作了

最重要的是，它必须反应灵敏

在css中，我从一开始就尝试过，但它并不完全符合我的要求

---

图像中的示例：

您可以使用多个框阴影属性执行此操作，例如：

box-shadow:
  -1px 1px 0px #ccc,
  -2px 2px 0px #ccc,
  -3px 3px 0px #ccc,
  -4px 4px 0px #ccc,
  -5px 5px 0px #ccc,
  -6px 6px 0px #ccc,
  -7px 7px 0px #ccc,
  -8px 8px 0px #ccc,
  -9px 9px 0px #ccc,
  -10px 10px 0px #ccc
}

演示示例-

正文{背景色：28434E；填充：50px；} .box{ 宽度：100px； 高度：100px； 背景色：fff； 框阴影： -1px 1px 0px ccc， -2px 2px 0px ccc， -3px 3px 0px ccc， -4px 4px 0px ccc， -5px 5px 0px ccc， -6px 6px 0px ccc， -7px 7px 0px ccc， -8px 8px 0px ccc， -9px 9px 0px ccc， -10px 10px 0px ccc }

---

我终于解决了这个问题。我将伪选择器：before和：after与倾斜变换一起使用

---

解决方案如下：

欢迎使用堆栈溢出！寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。我试过了。它的工作效率为50%。因为我需要不同颜色的左边框和下边框->示例图像