【问题标题】：Floating button and "bended" navigation bar [duplicate]浮动按钮和“弯曲”导航栏[重复]
【发布时间】：2021-02-22 16:23:02
【问题描述】：
我正在开发一个 Web 项目（使用 html、css、javascript），并希望在我的项目中为移动用户提供类似上图的内容。我做了一些研究，但找不到解决方案。
这种设计有具体的名称吗？我可以只用html css javascript 重新创建它吗？
【问题讨论】：
标签：
javascript
html
css
button
navbar
【解决方案1】：
我能想到的弯曲效果最简单的方法是创建一个带有弯曲的背景图像，而不是整天玩弄剪辑路径，就像你在 Photoshop 或类似的东西中想要的那样，将其导出为 PNG，然后将该图像用作 div 的背景。它必须是 PNG 或 SVG 以确保弯曲处的透明度。
至于底部两个图像中的按钮，我会使用 flexbox 将按钮均匀地隔开，然后将浮动按钮向上平移到所需位置。像这样的：
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.button {
transform: translateY(-1.8rem);
}