为框CSS添加深度

Question

我正在尝试使用CSS为box 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>

Answer 1

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

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

＆＃13;

＆＃13;

* {
  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, 0);
}

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

过渡带来的乐趣让我很无聊：https://jsfiddle.net/15k214am/4/

这是一个小调整，可以显示背景颜色：https://jsfiddle.net/15k214am/5/

Answer 2

在任一侧，您需要添加一些旋转的伪元素，并将透视添加到旋转变换中。

body {
  background: #1b1b1b;
  color: white;
}
.container {
  display: table;
  margin: auto;
}
.box {
  width: 150px;
  height: 150px;
  background: #cc0000;
  margin: 50px;
}

/* following lines were added/modified */

.with-depth {
  position: relative;
}
.with-depth:before, .with-depth:after {
  content: '';
  position: absolute;
  top: 0px; /* no need to change */
  height: 100%; /* no need to change */
  width: 25px; /* can be changed depending on the required width */
  background: grey;
  z-index: -1; /* not really needed but will stop it from interfering with interation */
}
.with-depth:before {
  right: -25px; /* equal to -1 * width of pseudo-element */
  transform-origin: left; /* don't change */
  transform: perspective(10px) rotateY(10deg); /* can be changed as per need */
}  
.with-depth:after {
  left: -25px; /* equal to -1 * width of pseudo-element */
  transform-origin: right; /* don't change */
  transform: perspective(10px) rotateY(-10deg); /* can be changed as per need */
}

/* just for demo */
.box:hover{
  height: 250px;
  width: 250px;
}

<div class="container">
  <div class="box with-depth"></div>
</div>

使用此方法：

• 产生一个响应输出（尝试在演示中悬停元素）不同于通过border方法生成的输出（指的是在中间部分添加带有伪元素的边框而不是边框​​上的边框像其他答案的元素，这是非常好的）。
• 将侧面元素上方和下方的部分保持透明，以防需要显示背景。
• 让您更好地控制深度角度。
• 让它更容易在盒子中添加阴影等额外效果。请参阅以下演示。 （这一点不适用于所讨论的形状，但对于通用形状非常有用。）

.box {
  width: 150px;
  height: 150px;
  background: #cc0000;
  margin: auto;
  box-shadow: 0px 2px 4px 2px #CCC;
}
.with-depth {
  position: relative;
}
.with-depth:before,
.with-depth:after {
  content: '';
  position: absolute;
  top: 0px;
  height: 100%;
  width: 25px;
  background: grey;
}
.with-depth:before {
  right: -25px;
  transform-origin: left;
  transform: perspective(10px) rotateY(10deg);
  box-shadow: 4px 4px 4px 2px #CCC;
}
.with-depth:after {
  left: -25px;
  transform-origin: right;
  transform: perspective(10px) rotateY(-10deg);
  box-shadow: -4px 4px 4px 2px #CCC;
}
/* just for demo */

.box:hover {
  height: 250px;
  width: 250px;
}

<div class="box with-depth"></div>