如何使用HTML和CSS实现立方体效果

如何使用HTML和CSS实现这种样式？它看起来像四个div，但是，我很想知道是否可以使用伪元素，如果可以，请如何使用

还有谁知道这种风格可以被称为什么，这样我就可以更新这个问题的标题，使之更加具体

部分{ 位置：相对位置； 填充：32px； } img{ 宽度：100%； 身高：100%； 对象匹配：覆盖； } 梅因先生{ 位置：绝对位置； 宽度：300px； 高度：300px； z指数：9； 填充：4px； 背景：fff； 边框：2倍实心透明； } .main.pic{ 边框：2个实心169957； } .sub{ z指数：8； 背景：31CD7F； 变换：旋转-60度； 宽度：300px； 高度：300px； } .sub1{ z指数：7； 背景：64D597； 变换：旋转-45度； 宽度：300px； 高度：300px； } .sub2{ z指数：6； 背景：91DCB1； 变换：旋转-30度； 宽度：300px； 高度：300px； }

---

这样你就可以相应地改变颜色了

HTML

---

这样你就可以相应地改变颜色了

HTML

---

这是一个只有一个元素和CSS变量的想法，您可以轻松控制一切：

.盒子{ -d:150px；/*尺寸*/ -c:RGBA0255,0,0.5；/*正方形的颜色*/ -b：绿色；/*边框颜色*/ -r:20度；/*旋转偏移*/ 宽度：var-d； 高度：var-d； 边框：calc0.207*var-d实心透明；/*0.207=sqrt2-1/2*/ 填充物：5px； 利润率：10px； 背景： var im中心/封面内容框内容框， 线性渐变白色，白色中心/calc100%-2个calc100%-2个填充框填充框， 线性梯度var-b，var-b填充框填充框， 线性渐变至右下角，透明49%，var-c 50%左上角/50.1%50.1%边框框， 线性渐变至左下角，透明49%，var-c 50%右上角/50.1%50.1%边框框， 线性渐变至右上角，透明49%，var-c 50%左下角/50.1%50.1%边框框， 线性渐变至左上角，透明49%，var-c 50%右下角/50.1%50.1%边框框； 背景重复：无重复； 位置：相对位置； 显示：内联块； } .box:之前， .盒子：之后{ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 左：0； 右：0； 底部：0； 背景：var-c； } .盒子：以前{ 变换：RotateCalc45度-var-r； } .盒子：之后{ 变换：rotatecalc45deg+var-r； }

---

这是一个只有一个元素和CSS变量的想法，您可以轻松控制一切：

.盒子{ -d:150px；/*尺寸*/ -c:RGBA0255,0,0.5；/*正方形的颜色*/ -b：绿色；/*边框颜色*/ -r:20度；/*旋转偏移*/ 宽度：var-d； 高度：var-d； 边框：calc0.207*var-d实心透明；/*0.207=sqrt2-1/2*/ 填充物：5px； 利润率：10px； 背景： var im中心/封面内容框内容框， 线性渐变白色，白色中心/calc100%-2个calc100%-2个填充框填充框， 线性梯度var-b，var-b填充框填充框， 线性渐变至右下角，透明49%，var-c 50%左上角/50.1%50.1%边框框， 线性渐变至左下角，透明49%，var-c 50%右上角/50.1%50.1%边框框， 线性渐变至右上角，透明49%，var-c 50%左下角/50.1%50.1%边框框， 线性渐变至左上角，透明49%，var-c 50%右下角/50.1%50.1%边框框； 背景重复：无重复； 位置：相对位置； 显示：内联块； } .box:之前， .盒子：之后{ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 左：0； 右：0； 底部：0； 背景：var-c； } .盒子：以前{ 变换：RotateCalc45度-var-r； } .盒子：之后{ 变换：rotatecalc45deg+var-r； }

---

你能给我们看看你的尝试吗？Hi@chintu，这是一支笔，我正在尝试，但无法判断我在做什么是对的还是错的。你能给我们看看你的尝试吗？Hi@chintu，这是一支笔，我正在尝试，但无法判断我在做什么是对的还是错的。你的代码是干净的。thanks@termani-如果这真的很明智的话。你的代码是干净的。谢谢

    <section>
<div class="main pic"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRRIyxyz9jQ3LoQs7vre7BcaxO-dwbyuJ0NEeL8m2h3450kO7P"></div>
  <div class="main sub">&nbsp;</div>
  <div class="main sub1">&nbsp;</div>
   <div class="main sub2">&nbsp;</div>
</section>

section{
  position: relative;
  padding: 32px;
}
img{
  width: 100%;
  height:100%;
  object-fit: cover;
}
.main{
      position: absolute;
    width: 100px;
    height: 100px;
    z-index: 9;  
  padding: 4px;  
    background: #fff;
   border: 2px solid transparent;
}
.main.pic{
    border: 2px solid;  
}
.main.sub{
  z-index: 8;
   background: #3ef59a;
  transform: rotate(-60deg);
}
.main.sub1{
  z-index: 7;
   background: red;
  transform: rotate(-45deg);
}
.main.sub2{
  z-index: 6;
   background: blue;
  transform: rotate(-30deg);
}