这种圆角梯形有什么思路科一实现

V2EX = way to explore

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

现在注册

已注册用户请登录

这是一个创建于 1117 天前的主题，其中的信息可能已经有所发展或是发生改变。

用 CSS 可以实现这种效果吗？还是有其它方法？

思路科

CSS

圆角

href

16 条回复 • 2022-01-06 17:59:43 +08:00

Biwood

2021-11-06 12:05:58 +08:00 via iPhone

CSS 不太好弄，或许可以用多个 border-radus 拼接，不如直接让设计师导出 svg

hm20062006ok

2021-11-06 13:32:15 +08:00

这个？ https://www.w3cplus.com/animation/web-animation-with-clip-path.html

tinzing

2021-11-06 13:42:44 +08:00

@Biwood 直接用背景图吗

tinzing

2021-11-06 13:43:53 +08:00

@hm20062006ok 这个有点复杂

Biwood

2021-11-06 14:19:52 +08:00

@tinzing
svg 本身就是基于 xml ，你直接把 svg 文件用编辑器打开，把源码复制到 html 里当做 html 标签使用就行

tyx1703

2021-11-06 15:23:25 +08:00

https://jsbin.com/mitifurocu/1/edit?html,css,output

借助 svg 可以使 clip-path 画出贝塞尔曲线。

Features

2021-11-06 15:58:01 +08:00

@tyx1703 厉害，学到了

IGJacklove

2021-11-06 16:03:25 +08:00

canvas 可以把

lizhenda

2021-11-06 16:14:08 +08:00

@tyx1703 真厉害啊，直接就给标准答案了

Building

2021-11-06 16:15:04 +08:00 via iPhone

换以前我可能会用代码直接画，但是现在，还是直接位图处理最省事

tinzing

2021-11-06 16:29:05 +08:00

@Biwood 下面大佬给出答案了谢谢哈

tinzing

2021-11-06 16:29:20 +08:00

@tyx1703 膜拜大佬，你是在太好啦

tinzing

2021-11-06 16:34:57 +08:00

@Building 这种效果实在复杂

vvong

2021-11-06 18:13:35 +08:00

@tyx1703 真厉害

Izumi1991

2021-11-06 19:15:02 +08:00

感谢

stone520

2022-01-06 17:59:43 +08:00

🐂