浮动按钮和“弯曲”导航栏

Question

我正在开发一个网络项目（使用 html、css、javascript），并且希望在我的项目中为移动用户提供类似上图的内容。我已经做了一些研究，但无法完全找到解决方案。

这种设计有具体的名称吗？我可以只用 html css javascript 重新创建它吗？

Answer 1

对于弯曲效果，我能想到的最简单的方法是创建一个带有弯曲的背景图像，就像在 Photoshop 或类似的东西中一样，将其导出为 PNG，然后使用该图像作为 div 的背景。它必须是 PNG 或 SVG 以确保弯曲的透明度。

至于底部两张图片中的按钮，我会使用 flexbox 将按钮均匀间隔，然后将浮动按钮向上平移到所需位置。像这样：

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.button {
    transform: translateY(-1.8rem);
}