html – 重新调整多维数据集的大小
发布时间:2020-12-14 18:38:25 所属栏目:资源 来源:网络整理
导读:我有一组使用CSS创建的多维数据集中的代码. 但是,如何将其调整为更大的立方体(例如,200px)?我尝试过,但每次尝试这样做,都会失去位置.. .mainDiv { position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top: 100px;}.square { width
我有一组使用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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- js对图片base64编码字符串进行解码并输出图像示例
- jquery图片滚动放大代码分享(2)
- 小程序获取当前页面URL的方法
- jquery – 如何在带有标题标记的主DIV中显示所有嵌套的DIV
- html – 使用MarkerClusterer在Marker上的InfoWindow
- domain-name-system – 如何缩短DNS传播效果
- 如何在Jest测试中使用我的webpack的html-loader导入?
- 如何在javascript中将元素添加到HTMLCollection中?
- haskell – 为什么Data.Text.Lazy.replace和Data.Text.Lazy
- html – 元关键字区分大小写?