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

• 資深大佬 : Wait845

  可以，最低下的方块用两个 div 拼成

• 主 資深大佬 : kaiki

  @Wait845 无法确定最底下的 div 的具体位置，怎么分为两个来拼凑呢，你的解决办法是用他和上层叠加的部分来创建一个新的 div，然后伪装成上层的 div 放在最上面吧

• 資深大佬 : Perry

  现实中真有这种需求？

• 資深大佬 : delectate

  没办法。但是可以找办法。
  比如确定分别画 4 个大方块，然后再画 4 个重叠部分的方块，最后画一个白色的中心块。
  也就是说画 9 个方块，从视觉上实现这种层叠效果。

• 資深大佬 : zanyxd

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

  @zanyxd 伪类 说错了_(:з」∠)_

• 資深大佬 : netnr

  https://www.netnr.com/run/code/4990501302152560821

  上左下右 顺序，右边橙色用一块覆盖上边的红色

• 資深大佬 : dswyzx

  @netnr #7 思路清奇.学到了

• 資深大佬 : TomVista

  分成 8 块就好了.

• 資深大佬 : TomVista

  @TomVista 这个要求百分比固定

• 資深大佬 : Mutoo

  正确的方法是用 css 的 3d transform，给每个层做个 1deg 左右的旋转，并且启用透视即可：
  https://codepen.io/mutoo/pen/zYvgMoL

  关键是这句：transform-style: preserve-3d;

• 主 資深大佬 : kaiki

  @Mutoo 好办法，学习了