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

Question

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

也有人知道这种风格可能被称为什么，所以我可以更新这个问题的标题更具体？

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

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

Answer 1

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

 .box { --d: 150px; /* Dimension*/ --c:rgba(0,255,0,0.5); /* Color of squares*/ --b:green; /* Color of border*/ --r:20deg; /* Offset of rotation*/ width:var(--d); height:var(--d); border:calc(0.207 * var(--d)) solid transparent; /* 0.207 = (sqrt(2) - 1)/2 */ padding:5px; margin:10px; background: var(--im) center/cover content-box content-box, linear-gradient(white,white) center/calc(100% - 2px) calc(100% - 2px) padding-box padding-box, linear-gradient(var(--b),var(--b)) padding-box padding-box, linear-gradient(to bottom right,transparent 49%,var(--c) 50%) top left /50.1% 50.1% border-box, linear-gradient(to bottom left ,transparent 49%,var(--c) 50%) top right/50.1% 50.1% border-box, linear-gradient(to top right,transparent 49%,var(--c) 50%) bottom left /50.1% 50.1% border-box, linear-gradient(to top left ,transparent 49%,var(--c) 50%) bottom right/50.1% 50.1% border-box; background-repeat:no-repeat; position:relative; display:inline-block; } .box:before, .box:after{ content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:var(--c); } .box:before { transform:rotate(calc(45deg - var(--r))); } .box:after { transform:rotate(calc(45deg + var(--r))); }

 <div class="box" style="--im:url(https://picsum.photos/id/19/200/200)"></div> <div class="box" style="--im:url(https://picsum.photos/id/30/200/200);--r:30deg;--b:red;--c:rgba(128,200,0,0.5);--d:100px"></div> <div class="box" style="--im:url(https://picsum.photos/id/45/200/200);--r:10deg;--b:blue;--c:rgba(0,200,255,0.5);--d:200px"></div>

这是一个可以玩代码的代码笔。

Answer 2

你去相应地改变颜色

HTML

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

CSS

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