
如下图,这种移动端切换的 tab 如何实现,主要是这里两个 tab item 高度不一致
1 galenjiang 2023 年 9 月 26 日 你可以问下设计,第二个高亮怎么展示,ta 会发现自己的盲点 |
2 wednesdayco 2023 年 9 月 26 日 简单版:切图 复杂版:CSS 实现这个圆角就够你喝一壶的 |
3 0829ewlLuna 2023 年 9 月 26 日 https://codepen.io/alexlime/pen/DjYwJz OP 可以参考一下这个,不知道可不可以解决你的问题 |
4 ciddechan 2023 年 9 月 26 日 伪元素如何 |
5 CrispyNoodles 2023 年 9 月 26 日 选中当前 tab 的时候动态把这个 item 的 height 调大就可以了 |
6 zficode OP @0829ewlLuna 太酷了,感谢您 |
7 raykle 2023 年 9 月 26 日 我做过 哈哈哈,中间用切图 |
8 zhenorzz 2023 年 9 月 26 日 直接成为切图仔 |
9 0829ewlLuna 2023 年 9 月 26 日 |
10 0829ewlLuna 2023 年 9 月 26 日 @zficode 客气,我给你发了两个,你可以结合这俩一起做,应该就能实现你要的效果了,我是在 codepen 上搜索 tabs 搜到的,你也可以直接去搜搜看看 |
11 zficode OP @0829ewlLuna 嗯嗯 |
13 wednesdayco 2023 年 9 月 26 日 |
14 zficode OP @wednesdayco 神 |
15 pengtdyd 2023 年 9 月 26 日 很简单吧,上面的头部和下面的内容是分开的,然后上面的头部主体是两个 div 或者其他的标签,然后中间的曲线单独实现。 |
16 jqtmviyu 2023 年 9 月 26 日 @wednesdayco #13 请问 clip-path 是用什么工具生成的? |
17 body007 2023 年 9 月 26 日 有大神回复的帖子,必须马克 |
18 dtekol 2023 年 9 月 26 日 |
19 LavaC 2023 年 9 月 27 日 好熟悉的问题,前几天 shader 群也有人问能不能用 clip-path 完成,然后有大神提供了个免 clip-path 的版本 https://codepen.io/Chokcoco/pen/qBLpPLP?editors=1100 |
20 hupoo 2023 年 9 月 27 日 @wednesdayco #13 这个基础上 也可以用径向渐变画个 透明扇形,原点在右上角 https://codepen.io/Hupoo/pen/ExGLmgM 剩下的效果就是开启 3d 效果 让这个元素往后面倒下去一定角度,模拟出近大远小的效果 差不多就很像了, @jqtmviyu |
21 wednesdayco 2023 年 9 月 27 日 @hupoo 用 clip-path 的原因是因为用径向渐变不能完成 lz 的这个图形,他这个的弧形不是正圆 |
22 wednesdayco 2023 年 9 月 27 日 @jqtmviyu svg 编辑的工具都行,我是随便在线了一个- - |