斜面的陰影邊框

Question

我想在CSS中做一個斜面的陰影邊框。

現在它的作品，我有幾個圖像（左上角，左下角，右角等）。這是非常糟糕的解決方案，我相信CSS或JS中的更好的解決方案是可能的。

使用按鈕它不起作用。

最重要的事情，它必須是響應

在CSS中我試過一開始，但它並不完全是我想怎麼工作。

例如，在IMAGE：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/

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 
 
}

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

可以通過只具有-1到-4例如降低厚度。

Answer 2

最後我解決了這個問題。我使用僞選擇器：before和：after進行斜交變換。

解決方法在這裏：https://gist.github.com/rihot/d4530492dfdbec05db1421fce1d248e6