kaiki
V2EX  ›  问与答

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

  •  
  •   kaiki · May 31, 2020 · 2082 views
    This topic created in 2199 days ago, the information mentioned may be changed or developed.
    https://i.loli.net/2020/05/31/IgKhoFND87QMt6L.jpg
    并不能确定 div 的尺寸和位置,但是想实现这种层叠,有可能吗?
    12 replies    2020-05-31 16:19:10 +08:00
    Wait845
        1
    Wait845  
       May 31, 2020 via iPhone
    可以,最低下的方块用两个 div 拼成
    kaiki
        2
    kaiki  
    OP
       May 31, 2020
    @Wait845 无法确定最底下的 div 的具体位置,怎么分为两个来拼凑呢,你的解决办法是用他和上层叠加的部分来创建一个新的 div,然后伪装成上层的 div 放在最上面吧
    Perry
        3
    Perry  
       May 31, 2020
    现实中真有这种需求?
    delectate
        4
    delectate  
       May 31, 2020
    没办法。但是可以找办法。
    比如确定分别画 4 个大方块,然后再画 4 个重叠部分的方块,最后画一个白色的中心块。
    也就是说画 9 个方块,从视觉上实现这种层叠效果。
    zanyxd
        5
    zanyxd  
       May 31, 2020 via Android
    三种想法
    1.可以用四块 div 然后背景图片障眼法
    2.或者伪元素改背景色定位到角落
    3.直接做 SVG 放上去可能比调定位更省事…
    zanyxd
        6
    zanyxd  
       May 31, 2020 via Android
    @zanyxd 伪类 说错了_(:з」∠)_
    netnr
        7
    netnr  
       May 31, 2020
    https://www.netnr.com/run/code/4990501302152560821

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

    关键是这句:transform-style: preserve-3d;
    kaiki
        12
    kaiki  
    OP
       May 31, 2020
    @Mutoo 好办法,学习了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3600 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 04:58 · PVG 12:58 · LAX 21:58 · JFK 00:58
    ♥ Do have faith in what you're doing.