css 样式求教

Question

请问这种样式如何实现

Answer 1

clippath

或者如下

    .foot-bar{
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      height: 50px;
      background-image: radial-gradient(circle at 50% 0, transparent, transparent 30px, #fff 30px);
    }

Answer 2

一般不会费力去做这种样式，通常的做法是UI出图！

整这个函数能让你崩溃，
即使二楼的渲染已经很牛掰了!
如果真的期望纯 CSS 复原建议使用 SVG 或者 Canvas
... 去相关网站找一下大佬的作品就好了！

Answer 3

最简单的就是放这样一张白色的图片

Answer 4

底部白色凹下去的地方让ui给你，中间的定位