纯·Css 样式如何实现该样式

[soislom]

RT

有前端的大佬帮帮忙吗

[murmur]

这个折腾一下 svg 应该是可以做出来，为什么纯 css ，这是面试题么，这么复杂的东西想不想直接切图省着和需求撕逼

[murmur]

https://stackoverflow.com/questions/57215029/css-tabs-with-rounded-base-smooth-base-transition

虽然我这么写但是我帮你搜到了类似的答案

不过我仍然认为这种我看不出来是什么参数的曲线就直接切图

[nbin2008]

解题：
1 、先做选中效果：白色背景，蓝底线
2 、选中状态，左上右上设置弧形
3 、css 前一个兄弟元素不支持，故用 before ，after 伪类设置相邻的弧形效果
4 、需要做判断，在头/尾的时候，before ，after 相应隐藏

[soislom]

@murmur UI 设计出来的就是这样，因为 svg 不是特别熟练，就考虑用纯 Css 实现

[soislom]

@nbin2008 感谢，我试试看

[IvanLi127]

这还有阴影欸，蹲个成果

[QUC062IzY3M1Y6dg]

https://codepen.io/imzsh/pen/rNQKwxd

写了个简单的，hover 转场依靠 css 会有瑕疵就懒得写了

[P233]

@soislom 应该让设计师导出 SVG

[cheese]

svg,css 搞这种曲线不得行

[soislom]

@P233 有点问题导致没有 SVG

[soislom]

@shuxhan 感谢

[ming2050]

贝塞尔曲线
https://www.runoob.com/cssref/func-cubic-bezier.html

[ming2050]

@mringg 给的链接有点问题，这个 svg 更擅长些

[Seanfuck]

用背景图转成 base64 data 来做吧，别烧脑了

[soislom]

@mringg 最开始也考虑过贝塞尔曲线来做，但想到一般都是做动画就放弃了

[soislom]

@Seanfuck 哈哈，也考虑过直接背景图覆盖

[abc635073826]

css 会有瑕疵，而且不太适配

[molvqingtai]

@cheese css path
https://developer.mozilla.org/en-US/docs/Web/CSS/path

[kkocdko]

刚想说，看到了 18 楼说了我认为的正解。

还可以用 url()嵌入 svg ，svg 弄成 dataurl 就行，base64 或者 encodeURIcomponent 一下都可以。

[SpiritQAQ]

点击后是否有横向位移动画是不是也会对最终实现方式有影响