向框添加深度 CSS

Question

我正在尝试用 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>

Answer 1

在任一侧，您需要添加几个伪元素，这些伪元素随着透视添加到旋转变换而旋转。

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>

使用此方法将：

产生响应式输出（尝试将元素悬停在演示中）不同于通过边框方法产生的输出（指的是在中间添加带有伪元素的边框而不是像其他答案一样在侧面元素上边框，非常好)。
将侧面元素上方和下方的部分保持透明，以防需要显示背景。
让你对深度的角度有更大的控制。
使向框添加阴影等额外效果变得更容易一些。参考下面的演示。（这一点不适用于所讨论的形状，但对通用形状很有用。）

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

Answer 2

您可以很容易地使用边框完成此操作。

我会在左右框周围放置一个大边框，并且只有颜色和左右边框相反。

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

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

向框添加深度 CSS

Adding depth to a box CSS

html

css

css-shapes