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