如何使用 CSS 创建一个带有渐变颜色的 3D 长方体

Question

我对 HTML、CSS 有基本的了解。我想用这 3 个 3D 长方体创建一个 HTML 页面，像这样

上图中的 3D 长方体对我来说看起来很复杂。那么任何人都可以建议如何使用 HTML 和 CSS 创建这个 3D 长方体

要创建第一个长方体，我已经尝试过：

<div class="box1">
      <div>step 1</div>
      <div>Your Title</div>
      <div></div>                                                
</div>

我在主 div 中添加了 3 个 div，它们代表长方体的面。下面是css：

.box1 {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#000;
  text-align:center;
  font-family:arial;
}
.box1 > div:first-child{
  width:30%;
  background:linear-gradient(to right,#008ec2b0,#085c6d);
  transform: rotateY(-30deg);
    transform-origin: right;
}
.box1 > div:last-child {
  width:60%;
  background:linear-gradient(to right,,#15a5c4,#4dca75);
  transform: rotateY(-30deg);
  transform-origin: right;
}

.box1 > div:not(:first-child):not(:last-child) {
  width:60%;
  background:linear-gradient(to right,#008ec2b0,#085c6d);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(180deg);
} 

但无法对齐长方体的底部

Answer 1

您可以使用透视和变换来创建这样的形状。

这是第二个框的示例：

.box {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#fff;
  text-align:center;
  font-family:arial;
  
}
.box > div:first-child {
  width:60%;
  background:linear-gradient(to right,#f57300,orange);
  transform: rotateY(-30deg);
    transform-origin: right;
    
}
.box > div:last-child {
  width:40%;
  background:linear-gradient(to right,orange,#e53800);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(30deg);
}

<div class="box">
<div>Your Title</div>
<div>30</div>
</div>

对于第一个和第三个，您可以考虑使用伪元素来获得第三个面，并添加一些skew 变换以获得完美的形状。

这里是第三个盒子的例子

.box {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#fff;
  text-align:center;
  font-family:arial;
  position:relative;
  
}
.box > div:first-child {
  width:60%;
  background:linear-gradient(to right,#f57300,orange);
  transform: rotateY(-30deg) skewY(9deg);
    transform-origin: right;
    
}
.box > div:last-child {
  width:40%;
  background:linear-gradient(to right,orange,#e53800);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(30deg) skewY(-9deg);
}

.box:before {
    content: "";
    position: absolute;
    top: -27px;
    width: 41%;
    left: 50px;
    height: 16px;
    background: linear-gradient(to right,orange,#e53800);
    transform: rotate(4.6deg) skewX(-80deg);
    transform-origin: left bottom;
}

<div class="box">
<div>Your Title</div>
<div>30</div>
</div>

这是第一个例子

.box {
  margin:50px;
  display:flex;
  width:300px;
  height:100px;
  perspective: 300px;
  font-size:30px;
  line-height:100px;
  color:#fff;
  text-align:center;
  font-family:arial;
  position:relative;
  
}
.box > div:first-child {
  width:60%;
  background:linear-gradient(to right,#f57300,orange);
  transform: rotateY(-30deg) skewY(-9deg);
    transform-origin: right;
    
}
.box > div:last-child {
  width:40%;
  background:linear-gradient(to right,orange,#e53800);
  border-left:1px solid #fff;
  transform-origin: left;
    transform: rotateY(30deg) skewY(9deg);
}

.box:before {
        content: "";
    position: absolute;
    top: 91px;
    width: 29%;
    left: 50px;
    height: 22px;
    background: linear-gradient(to right,orange,#e53800);
    transform: rotate(4.6deg) skewX(-80deg);
    transform-origin: left bottom;
}

<div class="box">
<div>Your Title</div>
<div>30</div>
</div>

Answer 2

你好，我只是做了一个小例子，让你知道如何在 css html 中使用透视图。

https://jsfiddle.net/ty820kbh/1

您可以在 CSS 中更改每个面的宽度和高度（保持连贯性）并添加所需的样式，然后您可以修改 .wrapper 的透视图以在您希望的视图中显示您的长方体。