如何在CSS中实现外凸/向外的border-radius圆角效果

我该如何实现下图所示的border-radius圆角效果？

以下是我目前已经实现的效果：

我当前编写的代码如下：

.sidebar__pages {
  text-decoration: none;
  width: 100%;
  height: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 20%;
}
.sidebar__page {
  text-decoration: none;
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}


.sidebar__page-button {
  background-color: black;
  border-top-left-radius: 38px;
  border-bottom-left-radius: 38px;
  //此处是问题所在，如何实现目标效果
}

<ul className="sidebar__pages">
        <li className="sidebar__page">
          <NavLink to="/" className="sidebar__page-button" activeClassName="">
            Administrare
          </NavLink>
        </li>

请问有没有人知道如何实现这类border-radius圆角效果？提前感谢大家的帮助！:D

你要实现的是按钮右侧上下的内凹圆角效果，CSS原生border-radius不支持直接设置内凹圆角，有两种常用实现方案：

方案1：伪元素遮挡（兼容性最好，适合纯色侧边栏背景） #

.sidebar__page-button {
  position: relative;
  background-color: black;
  border-top-left-radius: 38px;
  border-bottom-left-radius: 38px;
  /* 新增右侧外凸圆角 */
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  /* 按需调整内边距保证文字展示正常 */
  padding: 12px 24px;
}
/* 两个伪元素实现内凹视觉效果 */
.sidebar__page-button::before,
.sidebar__page-button::after {
  content: "";
  position: absolute;
  right: 0;
  width: 16px; /* 和右侧圆角大小保持一致 */
  height: 16px;
  /* 这里替换为你的侧边栏实际背景色 */
  background-color: #ffffff;
}
.sidebar__page-button::before {
  top: -16px; /* 和圆角大小保持一致 */
  border-bottom-right-radius: 16px;
}
.sidebar__page-button::after {
  bottom: -16px; /* 和圆角大小保持一致 */
  border-top-right-radius: 16px;
}

你可以根据设计需求自由调整圆角数值（示例用的16px）。

方案2：径向渐变绘制背景（适合渐变/图片侧边栏背景） #

如果侧边栏背景不是纯色，伪元素遮挡方案不适用，可以直接用径向渐变绘制按钮背景：

.sidebar__page-button {
  border-top-left-radius: 38px;
  border-bottom-left-radius: 38px;
  /* 16px对应圆角大小，可自行调整，black替换为你的按钮实际背景色 */
  background: 
    radial-gradient(circle at top right, transparent 16px, black 16px) top right,
    radial-gradient(circle at bottom right, transparent 16px, black 16px) bottom right;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

内容的提问来源于stack exchange，提问作者Emi Grigoras