V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
kaiki
V2EX  ›  问与答

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

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

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

    关键是这句:transform-style: preserve-3d;
    kaiki
        12
    kaiki  
    OP
       2020-05-31 16:19:10 +08:00
    @Mutoo 好办法,学习了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5355 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 09:02 · PVG 17:02 · LAX 02:02 · JFK 05:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.