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

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

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

思路科

CSS

圆角

href

16 replies • 2022-01-06 17:59:43 +08:00

Biwood

Nov 6, 2021 via iPhone

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

hm20062006ok

Nov 6, 2021

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

tinzing

Nov 6, 2021

@Biwood 直接用背景图吗

tinzing

Nov 6, 2021

@hm20062006ok 这个有点复杂

Biwood

Nov 6, 2021

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

unsized

Nov 6, 2021

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

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

Features

Nov 6, 2021

@tyx1703 厉害，学到了

IGJacklove

Nov 6, 2021

canvas 可以把

lizhenda

Nov 6, 2021

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

Building

Nov 6, 2021 via iPhone

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

tinzing

Nov 6, 2021

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

tinzing

Nov 6, 2021

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

tinzing

Nov 6, 2021

@Building 这种效果实在复杂

vvong

Nov 6, 2021

@tyx1703 真厉害

Izumi1991

Nov 6, 2021

感谢

stone520

Jan 6, 2022

🐂