网页上,怎么画一个大弧度?

Question

如图,很多网页和app的个人中心,顶部都有这样的大弧度,是怎么做的呢?用css?svg?

Answer 1

刚好也遇到，下面的做法满足我的需求，供参考：

 border-bottom-right-radius: 187px 8px;
 border-bottom-left-radius: 187px 8px;

根据需要调整上面值；
预览：

参考：

https://developer.mozilla.org...
兼容性：https://caniuse.com/#search=b...

Answer 2

用 css的话

border-radius: 0 0 50% 50% / 0 0 8% 8%;

可以不用SVG，当然要精确还是需要用SVG，或者图片来做

Answer 3

楼上的CSS3 border-radius 属性 是正解,
如果是单色的话, 不用找设计师自己就能做
我们商城就是用的这种弧度背景, 颜色是后台返回的
具体做法就是把这个div当背景, 把他的左下, 右下 给了弧度, 这个数值给的不对容易成椭圆哈哈哈,好好调调

Answer 4

一个超大的圆

Answer 5

内行人告诉你 这是一张有弧度设计的背景图片

Answer 6

白色背景，加一张 有弧度的图片不就解决了

Answer 7

找设计师哇 这哪是画出来的。

Answer 8

超出 父级的宽度 + border-radius + 居中

Answer 9

我在学校时也有这样的疑惑
想着怎样编码才能实现
直到毕业后第一次做App时
设计师小姐姐给我的sketch里有这样一张图片...