斜面阴影边框

Question

我正在尝试在CSS中执行斜面阴影边框。

现在它有效，我有几个图像（左上角，左下角，右上角等......）。这是一个非常糟糕的解决方案，我相信CSS或JS可以提供​​更好的解决方案。

使用按钮它不起作用。

最重要的是，必须具有响应性

在css中我尝试了一下，但它并不能完全符合我的要求。

图片示例：example how it should looks like

Answer 1

您可以使用多个box-shadow属性执行此操作，例如：

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
}

演示示例 - https://jsfiddle.net/bztexp0z/

＆＃13;

＆＃13;

body { background-color:#28434E; padding:50px; }

.box { 
width:100px; 
height:100px;
background-color:#fff; 

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
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

例如，只需-1到-4即可缩小厚度。

Answer 2

最后我解决了这个问题。我使用了伪选择器：before和：after with skew transformation。

解决方案在这里：https://gist.github.com/rihot/d4530492dfdbec05db1421fce1d248e6