带有vue和svg的弯曲底部边框

Question

在图片中，您可以看到SAP的理想布局（顺时针旋转90度）。

我的第一个直觉是将其分为3个部分：

1. 顶部的导航栏
2. 包含一些文本的简单div 对于底部，我被卡住了。搜索后，我选择了一个svg路径组件，并将所有3个组件合并到一个父组件中。 任何其他分量都将在曲线下方呈现。

到目前为止，它仍然有效。但我很好奇是否有其他（也许更好）的解决方案（我确定有解决方案）。

预先感谢

Answer 1

另一种实现此目的的方法是，向导航栏中添加::after元素，并添加一些border-radius来制作曲线。这是一个示例：

#navbar {
  position: relative;
  background-color: lightblue;
  padding: 30px;
}

#navbar::after {
  content: "";
  position: absolute;
  height: 30px;
  width: 100%;
  background-color: lightblue;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
  border-radius: 0 0 100% 100%;
}

<div id="navbar">
  Website
</div>