CSS 或 JS 能实现如图的 div 层叠吗？

2020-05-31 06:51:20 +08:00
 kaiki
https://i.loli.net/2020/05/31/IgKhoFND87QMt6L.jpg
并不能确定 div 的尺寸和位置，但是想实现这种层叠，有可能吗？
1624 次点击
所在节点    问与答
12 条回复
Wait845
2020-05-31 06:55:53 +08:00
可以，最低下的方块用两个 div 拼成
kaiki
2020-05-31 06:58:45 +08:00
@Wait845 无法确定最底下的 div 的具体位置，怎么分为两个来拼凑呢，你的解决办法是用他和上层叠加的部分来创建一个新的 div，然后伪装成上层的 div 放在最上面吧
Perry
2020-05-31 07:05:18 +08:00
现实中真有这种需求？
delectate
2020-05-31 07:59:39 +08:00
没办法。但是可以找办法。
比如确定分别画 4 个大方块，然后再画 4 个重叠部分的方块，最后画一个白色的中心块。
也就是说画 9 个方块，从视觉上实现这种层叠效果。
zanyxd
2020-05-31 10:03:35 +08:00
三种想法
1.可以用四块 div 然后背景图片障眼法
2.或者伪元素改背景色定位到角落
3.直接做 SVG 放上去可能比调定位更省事…
zanyxd
2020-05-31 10:05:11 +08:00
@zanyxd 伪类 说错了_(:з」∠)_
netnr
2020-05-31 11:31:23 +08:00
https://www.netnr.com/run/code/4990501302152560821

上左下右 顺序，右边橙色用一块覆盖上边的红色
dswyzx
2020-05-31 11:36:39 +08:00
@netnr #7 思路清奇.学到了
TomVista
2020-05-31 12:05:13 +08:00
分成 8 块就好了.
TomVista
2020-05-31 12:06:32 +08:00
@TomVista 这个要求百分比固定
Mutoo
2020-05-31 16:12:17 +08:00
正确的方法是用 css 的 3d transform，给每个层做个 1deg 左右的旋转，并且启用透视即可：
https://codepen.io/mutoo/pen/zYvgMoL

关键是这句：transform-style: preserve-3d;
kaiki
2020-05-31 16:19:10 +08:00
@Mutoo 好办法，学习了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/677106

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX