V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zficode
V2EX  ›  程序员

[求助] 前端样式实现

  •  
  •   zficode · 2023-09-26 17:57:41 +08:00 · 1849 次点击
    这是一个创建于 439 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如下图,这种移动端切换的 tab 如何实现,主要是这里两个 tab item 高度不一致

    22 条回复    2023-09-27 10:50:39 +08:00
    galenjiang
        1
    galenjiang  
       2023-09-26 18:00:26 +08:00
    你可以问下设计,第二个高亮怎么展示,ta 会发现自己的盲点
    wednesdayco
        2
    wednesdayco  
       2023-09-26 18:00:43 +08:00
    简单版:切图
    复杂版:CSS 实现这个圆角就够你喝一壶的
    0829ewlLuna
        3
    0829ewlLuna  
       2023-09-26 18:10:16 +08:00   ❤️ 1
    https://codepen.io/alexlime/pen/DjYwJz
    OP 可以参考一下这个,不知道可不可以解决你的问题
    ciddechan
        4
    ciddechan  
       2023-09-26 18:11:24 +08:00
    伪元素如何
    CrispyNoodles
        5
    CrispyNoodles  
       2023-09-26 18:12:21 +08:00
    选中当前 tab 的时候动态把这个 item 的 height 调大就可以了
    zficode
        6
    zficode  
    OP
       2023-09-26 18:12:53 +08:00
    @0829ewlLuna 太酷了,感谢您
    raykle
        7
    raykle  
       2023-09-26 18:14:29 +08:00
    我做过 哈哈哈,中间用切图
    zhenorzz
        8
    zhenorzz  
       2023-09-26 18:15:05 +08:00
    直接成为切图仔
    0829ewlLuna
        9
    0829ewlLuna  
       2023-09-26 18:15:46 +08:00
    0829ewlLuna
        10
    0829ewlLuna  
       2023-09-26 18:17:02 +08:00
    @zficode 客气,我给你发了两个,你可以结合这俩一起做,应该就能实现你要的效果了,我是在 codepen 上搜索 tabs 搜到的,你也可以直接去搜搜看看
    zficode
        11
    zficode  
    OP
       2023-09-26 18:33:52 +08:00
    @0829ewlLuna 嗯嗯
    zficode
        12
    zficode  
    OP
       2023-09-26 18:34:12 +08:00
    @raykle 是切右下角那个弧形吗
    wednesdayco
        13
    wednesdayco  
       2023-09-26 18:45:44 +08:00
    zficode
        14
    zficode  
    OP
       2023-09-26 18:56:58 +08:00
    pengtdyd
        15
    pengtdyd  
       2023-09-26 19:23:59 +08:00
    很简单吧,上面的头部和下面的内容是分开的,然后上面的头部主体是两个 div 或者其他的标签,然后中间的曲线单独实现。
    jqtmviyu
        16
    jqtmviyu  
       2023-09-26 19:34:29 +08:00
    @wednesdayco #13 请问 clip-path 是用什么工具生成的?
    body007
        17
    body007  
       2023-09-26 19:41:04 +08:00
    有大神回复的帖子,必须马克
    dtekol
        18
    dtekol  
       2023-09-26 20:19:54 +08:00
    刚好我以前实现过,堆 div ,贴个代码给你

    https://codesandbox.io/p/sandbox/peaceful-hooks-x5r7m4
    LavaC
        19
    LavaC  
       2023-09-27 09:18:12 +08:00
    好熟悉的问题,前几天 shader 群也有人问能不能用 clip-path 完成,然后有大神提供了个免 clip-path 的版本 https://codepen.io/Chokcoco/pen/qBLpPLP?editors=1100
    hupoo
        20
    hupoo  
       2023-09-27 09:30:38 +08:00
    @wednesdayco #13 这个基础上 也可以用径向渐变画个 透明扇形,原点在右上角 https://codepen.io/Hupoo/pen/ExGLmgM 剩下的效果就是开启 3d 效果 让这个元素往后面倒下去一定角度,模拟出近大远小的效果 差不多就很像了,
    @jqtmviyu
    wednesdayco
        21
    wednesdayco  
       2023-09-27 10:09:02 +08:00
    @hupoo 用 clip-path 的原因是因为用径向渐变不能完成 lz 的这个图形,他这个的弧形不是正圆
    wednesdayco
        22
    wednesdayco  
       2023-09-27 10:50:39 +08:00
    @jqtmviyu svg 编辑的工具都行,我是随便在线了一个- -
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5070 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:48 · PVG 15:48 · LAX 23:48 · JFK 02:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.