css 如何实现任意的弧

Question

如上图所示
如何实现底部发布瞬间上的那个圆弧，并且与左右两边的阴影线过渡很平滑

Answer 1

正好有空画了一个

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path  d="M 0 50 H 100 C 120 50, 120 10, 150 10
    S 180 50, 200 50  H 280" stroke="#333333"
    stroke-width="1" fill="none" />
</svg>

你放 html 里看下就行了

Answer 2

SVG ?

只想得到这个。

Answer 3

1.你给发布瞬间这个按钮 加一个外层div，这个div相对于tabbar绝对定位

2.然后把这个div 的 width 和 height设置成一样

3.div背景设置成和你现在的tabbar一个颜色

4.定位设置，左右居中，上下的话，根据UI图调整

这样这个圆形div往下偏的越多弧形越小，相反，越少，弧形越大

Answer 4

优雅点就svg，省事点就弄张图