你可以使用li元素的：：after伪元素来实现。如果你绝对定位它，那么你可以创建一个覆盖父div的块。使用clip path来制作你想要的形状，然后调整大小，直到你对齐它。下面的例子仍然需要一些调整，但我会留给你。
我使用了一些有用的资源。第一个是mavo.io上的svg path builder。使用它可以使SVG看起来像你想要的那样。然后是github上的这个方便的clip path converter。它重新编码SVG，然后给你必要的html和css来剪辑元素。

.sidebar {
  font-size: 1.5rem;
  color: white;
  width: fit-content;
  background-color: black;
  padding: 1rem;
}

.menulist {
  padding-left: 0;
  list-style-type: none;
  width: 100%;
}

.menulist > li {
  position: relative;
  width: 100%;
  margin-block: 1rem;
  text-align: center;
}

.menulist > li:hover {
  background-color: white;
  color: black;
  border-top-left-radius: 100vh;
  border-bottom-left-radius: 100vh;
}

.menulist > li:hover::after {
  content: "";
  position: absolute;
  top: -1rem;
  left: 100%;
  bottom: -1rem;
  width: 1rem;
  background-color: white;
  background-size: cover;
  clip-path: url(#my-clip-path);
}

.svg {
  /*hide the SVG */
  position: absolute;
  width: 0;
  height: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="m0,0.25 a1,0.25,0,0,0,1,-0.25 l0,1 a1,0.25,0,0,0,-1,-0.25 l0,-0.5"></path></clipPath>
</svg>

<div class='sidebar'>
  <div class='title'>Test</div>
  <ul class='menulist'>
    <li><i class="fa-solid fa-chart-line"></i></li>
    <li><i class="fa-solid fa-chart-line"></i></li>
    <li><i class="fa-solid fa-chart-line"></i></li>
    <li><i class="fa-solid fa-chart-line"></i></li>
    <li><i class="fa-solid fa-chart-line"></i></li>
  </ul>
</div>

你可以给予选择一个矩形的底部，并把半圆形的小方块放在左上角和左下角（见图）。你可以使用以下CSS属性创建这些形状：border-bottom-right-radius（用于顶部正方形）和border-top-right-radius（用于底部正方形）。使用绝对定位将它们定位在底部的角上，并使它们的宽度为100%（以便它们接触导航的外边缘）。
CSS trick to get curved base

你可以非常明智地使用:before和:after。使用:after作为最后的边界半径。另外，使用:has选择器为前一个元素应用css（不确定它是否能在FF-其他浏览器上工作）。
PS：使用JavaScript的点击事件来选择元素。
请参见下面的片段：

let items = document.querySelectorAll(".item");

items.forEach(item=>{
  item.addEventListener("click", (event)=>{
    items.forEach(item=>{ 
      item.classList.remove("active");
    });

    event.currentTarget.classList.add("active");
  });
});

.menu {
  padding: 1rem;
  width: 100px;
}
.title {
  background-color: black;
  color: white;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
}

ul {
  padding: 0;
  margin: 0;
}
.item {
  cursor: pointer;
  list-style: none;
  height: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.item.noclick {
  height: 2rem;
  pointer-events: none;
}
.item.noclick:before, .item.noclick:after {
  height: 2rem;
  pointer-events: none;
}
.item i{
  background-color: black;
  color: white;
  width: 4rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -1.375rem;
}
.item.active i {
  color: black;
  background-color: white;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.item:before, .item:after{
  content: "";
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-color: black;
}
.item:before{
  width: 4rem;
}
.item.active:after{
  background-color: white;
}

.item:has(+.active):after{
  border-bottom-right-radius: 999px;
}
.item.active + .item:after {
    border-top-right-radius: 999px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>

<div class="menu">
  <div class="title">Test</div>
  <ul>
    <li class="item noclick"><div></div></li>
    <li class="item"><i class="fa-solid fa-chart-column"></i></i></li>
    <li class="item"><i class="fa-solid fa-chart-column"></i></li>
    <li class="item active"><i class="fa-solid fa-chart-column"></i></li>
    <li class="item"><i class="fa-solid fa-chart-column"></i></li>
    <li class="item"><i class="fa-solid fa-chart-column"></i></li>
    <li class="item noclick"><div></div></li>
  </ul>
</div>