[求助] 前端样式实现

[zficode]

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

[galenjiang]

你可以问下设计，第二个高亮怎么展示，ta 会发现自己的盲点

[wednesdayco]

简单版：切图
复杂版：CSS 实现这个圆角就够你喝一壶的

[0829ewlLuna]

https://codepen.io/alexlime/pen/DjYwJz
OP 可以参考一下这个，不知道可不可以解决你的问题

[ciddechan]

伪元素如何

[CrispyNoodles]

选中当前 tab 的时候动态把这个 item 的 height 调大就可以了

[zficode]

@0829ewlLuna 太酷了，感谢您

[raykle]

我做过 哈哈哈，中间用切图

[zhenorzz]

直接成为切图仔

[0829ewlLuna]

https://codepen.io/oliviale/pen/bGWXEWK 好像这个也阔以

[0829ewlLuna]

@zficode 客气，我给你发了两个，你可以结合这俩一起做，应该就能实现你要的效果了，我是在 codepen 上搜索 tabs 搜到的，你也可以直接去搜搜看看

[zficode]

@0829ewlLuna 嗯嗯

[zficode]

@raykle 是切右下角那个弧形吗

[wednesdayco]

https://codepen.io/wednesday-the-selector/pen/VwqXJaM

动效自己写 意思意思

[zficode]

@wednesdayco 神

[pengtdyd]

很简单吧，上面的头部和下面的内容是分开的，然后上面的头部主体是两个 div 或者其他的标签，然后中间的曲线单独实现。

[jqtmviyu]

@wednesdayco #13 请问 clip-path 是用什么工具生成的?

[body007]

有大神回复的帖子，必须马克

[dtekol]

刚好我以前实现过，堆 div ，贴个代码给你

https://codesandbox.io/p/sandbox/peaceful-hooks-x5r7m4

[LavaC]

好熟悉的问题，前几天 shader 群也有人问能不能用 clip-path 完成，然后有大神提供了个免 clip-path 的版本 https://codepen.io/Chokcoco/pen/qBLpPLP?editors=1100

[hupoo]

@wednesdayco #13 这个基础上 也可以用径向渐变画个 透明扇形，原点在右上角 https://codepen.io/Hupoo/pen/ExGLmgM 剩下的效果就是开启 3d 效果 让这个元素往后面倒下去一定角度，模拟出近大远小的效果 差不多就很像了，
@jqtmviyu

[wednesdayco]

@hupoo 用 clip-path 的原因是因为用径向渐变不能完成 lz 的这个图形，他这个的弧形不是正圆

[wednesdayco]

@jqtmviyu svg 编辑的工具都行，我是随便在线了一个- -