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

<div class="container">
	<div class="Box right-skew"></div>
</div>

解决方法

你可以很容易地用边框完成这个.

我在左右两侧放置了一个大边框,只有颜色和左右边框相反.

* {
  Box-sizing: border-Box;
}

.Boxes {
  display: flex;
  justify-content: center;
}

.Box {
  width: 30%;
  height: 200px;
  text-align: center;
}

.Box--1,.Box--3 {
  border: 20px solid white;
  background-color: rgb(200,0);
}

.Box--1 {
  border-right-color: red;
}

.Box--3 {
  border-left-color: red;
}

.Box--2 {
  background-color: darkred;
}

<div class="Boxes">
  <div class="Box Box--1">1</div>
  <div class="Box Box--2">2</div>
  <div class="Box Box--3">3</div>
</div>

这是一个快速演示：https://jsfiddle.net/15k214am/3/

转换的一些乐趣导致我很无聊：https://jsfiddle.net/15k214am/4/

这是一个小调整,允许背景颜色显示：https://jsfiddle.net/15k214am/5/