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

2021 年 11 月 6 日
 tinzing

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

4718 次点击
所在节点    前端开发
16 条回复
Biwood
2021 年 11 月 6 日
CSS 不太好弄,或许可以用多个 border-radus 拼接,不如直接让设计师导出 svg
hm20062006ok
2021 年 11 月 6 日
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 日
换以前我可能会用代码直接画,但是现在,还是直接位图处理最省事
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 日
🐂

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/813450

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX