html – 重新调整多维数据集的大小

我有一组使用CSS创建的多维数据集中的代码.

但是,如何将其调整为更大的立方体(例如,200px)？我尝试过,但每次尝试这样做,都会失去位置..

.mainDiv {
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top: 100px;
}

.square {
  width: 100px;
  height: 100px;
  background: #c52329;
  border: solid 2px #FFF;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}

.square2 {
  width: 100px;
  height: 100px;
  background: #c52329;
  border: solid 2px #FFF;
  transform: skew(180deg,150deg);
  position: absolute;
  left: 102px;
  top: 43px;
}

.square3 {
  width: 114px;
  height: 100px;
  background: #c52329;
  border: solid 2px #FFF;
  transform: rotate(150deg) translate(-40px,-16px) skew(30deg,0deg);
  position: absolute;
  left: 0px;
  top: -32px;
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

解决方法

您可以先调整代码,通过减少代码并删除一些固定值来简化形状,然后您只需要更改主元素的大小以使多维数据集变大或变小：

* {
  Box-sizing:border-Box;
}

.mainDiv {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 120px auto 0;
  font-size:0; 
}
.mainDiv > * {
  background: #c52329;
  border: solid 2px #FFF;
}

.square,.square2{
  width: 50%;
  height: 100%;
  display:inline-block;
}
.square {
  transform-origin:top left;
  transform:skewY(30deg);
}
.square2 {
  transform-origin:top right;
  transform:skewY(-30deg);
}

.square3 {
  width: calc(50% * 1.14);
  height: 100%;
  transform: rotate(150deg) skewX(30deg);
  position: absolute;
  left: 21%;
  top: -50%;
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>
<div class="mainDiv" style="width:100px;height:50px;">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

<div class="mainDiv" style="width:400px;height:200px;">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

您还可以使用伪元素减少代码并引入CSS变量来控制大小：

.mainDiv {
  position: relative;
  width: calc(100px * var(--s,1));
  height: calc(50px * var(--s,1));
  margin: calc(50px * var(--s,1)) auto;
}

.mainDiv:before,.mainDiv:after{
  content:"";
  width:50%;
  height: 100%;
  background: #c52329;
  border: solid 2px #FFF;
  display:inline-block;
  Box-sizing:border-Box;
  background-clip:content-Box;
}
.mainDiv:before {
  transform-origin:top left;
  transform:skewY(30deg);
}
.mainDiv:after {
  transform-origin:top right;
  transform:skewY(-30deg);
}

.mainDiv > div {
  width: calc(50% * 1.14);
  height: 100%;
  transform: rotate(150deg) skewX(30deg);
  position: absolute;
  background: #c52329;
  border: solid 2px #FFF;
  Box-sizing:border-Box;
  background-clip:content-Box;
  left: 21%;
  top: -50%;
}

<div class="mainDiv" style="--s:0.5"><div></div></div>

<div class="mainDiv"><div></div></div>

<div class="mainDiv" style="--s:1.5"><div></div></div>

<div class="mainDiv" style="--s:2"><div></div></div>

<div class="mainDiv" style="--s:3"><div></div></div>

您甚至可以通过依赖某些渐变作为背景来创建形状的一部分并删除内部div,从而减少更多代码,并且最后只有一个元素：

.mainDiv {
  position: relative;
  width: calc(100px * var(--s,1));
  margin: 0 auto calc(50px * var(--s,1));
  background:
   linear-gradient(to bottom left,#c52329 47%,transparent 48.5%) bottom left,linear-gradient(to bottom right,transparent 48.5%) bottom right,linear-gradient(to top left,transparent 48.5%) top left,linear-gradient(to top right,transparent 48.5%) top right;
  background-size:50% 51%;
  background-repeat:no-repeat;
   
}

.mainDiv:before,.mainDiv:after{
  content:"";
  width:50%;
  height: 100%;
  background: #c52329;
  border: solid 2px #FFF;
  display:inline-block;
  Box-sizing:border-Box;
}
.mainDiv:before {
  transform-origin:top left;
  transform:skewY(27deg) translateY(50%);
}
.mainDiv:after {
  transform-origin:top right;
  transform:skewY(-27deg) translateY(50%);
}

<div class="mainDiv"></div>

<div class="mainDiv" style="--s:1.5"></div>

<div class="mainDiv" style="--s:2"></div>

<div class="mainDiv" style="--s:3"></div>