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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1979 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://i.loli.net/2020/05/31/IgKhoFND87QMt6L.jpg
并不能确定 div 的尺寸和位置，但是想实现这种层叠，有可能吗？

12 条回复 • 2020-05-31 16:19:10 +08:00

Wait845

2020-05-31 06:55:53 +08:00 via iPhone

可以，最低下的方块用两个 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 via Android

三种想法
1.可以用四块 div 然后背景图片障眼法
2.或者伪元素改背景色定位到角落
3.直接做 SVG 放上去可能比调定位更省事…

zanyxd

2020-05-31 10:05:11 +08:00 via Android

@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 好办法，学习了