什么是在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); 
}