html - 如何使用 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>

标签： htmlcss

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>

这是一个使用代码的代码笔。