Curved bottom border with vue and svg

Question

In the picture you can see the Rough desired layout of SAP (rotated by 90 degrees clockwise).

My first instinct would be to split it into 3 components:

1. the nav-bar on top
2. simple div containing some text and for the bottom I was stuck. After searching I opted for a svg path component and combined all 3 in a parent component. Any other components will be rendered below the curve.

So far it works. But I am curious if there are other, maybe better, solutions to this (which I am sure there are).

Thanks in advance

Answer 1

Another way to achieve this would be to add an ::after element to the navbar with some border-radius to make the curve. Here is an example:

#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>