带有vue和svg的弯曲底部边框[重复]

【问题标题】：Curved bottom border with vue and svg [duplicate]带有vue和svg的弯曲底部边框[重复]
【发布时间】：2020-12-23 22:33:57
【问题描述】：

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

我的第一反应是把它分成 3 个部分：

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

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

提前致谢

【问题讨论】：

标签： css svg vue-component vuetify.js

【解决方案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>

【讨论】：

感谢您的验证，能否请您为我的答案投票？