html的css怎么设置深度,html – 为框CSS添加深度

我试图用CSS添加侧面div,但似乎无法搞清楚.这就是我到目前为止所拥有的.谁能指出我正确的方向？我在下面列出了我想要复制的图片.这是中间的盒子.

body {

background: #1b1b1b;

color: white;

}

.container {

display: table;

margin: auto;

}

.box {

width: 150px;

height: 150px;

background: #cc0000;

margin: 50px;

}

.right-skew {

position: relative;

}

.right-skew:before {

z-index: -1;

content: '';

position: absolute;

top: 0;

bottom: 0;

right: -15px;

display: block;

width: 35px;

background: grey;

-webkit-transform: skew(-10deg);

-ms-transform: skew(-10deg);

transform: skew(-10deg);

}

.right-skew:after {

z-index: -1;

content: '';

position: absolute;

top: 0;

bottom: 0;

right: -15px;

display: block;

width: 35px;

background: grey;

-webkit-transform: skew(10deg);

-ms-transform: skew(10deg);

transform: skew(10deg);

}

.skew-border {

border: 5px solid yellow;

}