什麼是在CSS中創建準3d塊的好方法？

Question

這裏有一個例子爲圖像：

我想要的風格頁面元素像這樣使用CSS，但。我似乎無法讓它使用邊框樣式。幫助讚賞。

Answer 1

你也可以用兩個傾斜的僞元素來做到這一點。 Support is the same as for box-shadow: everything except IE8/7 and Opera Mini。

live demo

HTML：

<div class='box'></div> 

CSS：

.box { 
    position: relative; 
    margin: 10em auto 0; 
    width: 20em; height: 20em; 
    background: dimgrey; 
} 
.box:before, .box:after { 
    position: absolute; 
    transform-origin: bottom right; 
    content: ''; 
} 
.box:before { 
    top: 0; right: 100%; bottom: 0; 
    width: 4em; 
    background: darkgrey; 
    transform: skewY(45deg); 
} 
.box:after { 
    right: 0; bottom: 100%; left: 0; 
    height: 4em; 
    background: silver; 
    transform: skewX(45deg); 
}