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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

思路科

CSS

圆角

href

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

Biwood

2021 年 11 月 6 日 via iPhone

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

hm20062006ok

2021 年 11 月 6 日

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

tinzing

2021 年 11 月 6 日

@Biwood 直接用背景图吗

tinzing

2021 年 11 月 6 日

@hm20062006ok 这个有点复杂

Biwood

2021 年 11 月 6 日

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

unsized

2021 年 11 月 6 日

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

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

Features

2021 年 11 月 6 日

@tyx1703 厉害，学到了

IGJacklove

2021 年 11 月 6 日

canvas 可以把

lizhenda

2021 年 11 月 6 日

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

Building

2021 年 11 月 6 日 via iPhone

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

tinzing

2021 年 11 月 6 日

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

tinzing

2021 年 11 月 6 日

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

tinzing

2021 年 11 月 6 日

@Building 这种效果实在复杂

vvong

2021 年 11 月 6 日

@tyx1703 真厉害

Izumi1991

2021 年 11 月 6 日

感谢

stone520

2022 年 1 月 6 日

🐂