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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 1018 days ago, the information mentioned may be changed or developed.

RT

有前端的大佬帮帮忙吗

avatar

样式

avatar

CSS

大佬

21 replies • 2023-07-21 10:04:45 +08:00

murmur

Jul 20, 2023

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

murmur

Jul 20, 2023

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

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

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

nbin2008

Jul 20, 2023

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

soislom

Jul 20, 2023

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

soislom

Jul 20, 2023

@nbin2008 感谢，我试试看

IvanLi127

Jul 20, 2023 via iPad

这还有阴影欸，蹲个成果

QUC062IzY3M1Y6dg

Jul 20, 2023

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

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

P233

Jul 20, 2023

@soislom 应该让设计师导出 SVG

cheese

Jul 20, 2023

svg,css 搞这种曲线不得行

soislom

Jul 20, 2023

@P233 有点问题导致没有 SVG

soislom

Jul 20, 2023

@shuxhan 感谢

ming2050

Jul 20, 2023

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

ming2050

Jul 20, 2023

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

Seanfuck

Jul 20, 2023

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

soislom

Jul 20, 2023

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

soislom

Jul 20, 2023

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

abc635073826

Jul 20, 2023

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

molvqingtai

Jul 20, 2023 via Android

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

kkocdko

Jul 20, 2023 via Android

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

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

SpiritQAQ

Jul 21, 2023

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

menglizhi2333

Jul 21, 2023

18 楼说的 css path 是最符合需求