在CSS中创建准三维块的好方法是什么？

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);
}