我想使用 HTML、CSS 和 Tailwind CSS 设计一个右侧顶部和底部边缘带有凹圆角的侧边栏？

Question

我正在设计一个侧边栏，其中活动项目的右上角和右下角应有凹曲线。我使用 Tailwind CSS 进行样式设置，最初尝试设置

borderTopRightRadius: '0%'

和

borderBottomRightRadius: '0%'

，但结果是直线，而不是我想要的凹曲线。这是我想要实现的示例（此处包含图像）。

如何设置侧边栏的样式，以便当某个项目处于活动状态时，右侧具有向上和向下的凹曲线？

<li
  className={`flex rounded-3xl w-[115%] p-2 cursor-pointer text-gray-300 text-sm items-center gap-x-2 ${
    location.pathname === menu.path ? 'active-item' : ''
  } hover:bg-white hover:text-black transition duration-300`}
>
  <Link to={menu.path} className="flex items-center gap-x-4 w-full">
    <span className="icon">{menu.icon}</span>
    <span className={`${!open && 'hidden'} origin-left duration-200`}>
      {menu.title}
    </span>
  </Link>
</li>

我尝试过的：

• 我将

  borderTopRightRadius

  和

  borderBottomRightRadius

  设置为

  0%

  ，但结果是直边。

• 我尝试了不同的边框半径值，但无法获得我正在寻找的凹面形状。

所需的设计：我希望活动菜单项的右侧有一条凹曲线，类似于您在此图像中看到的曲线（附上您的参考图像）。

所需解决方案： 如何使用 Tailwind CSS 或自定义 CSS 在活动侧边栏项目的右上角和右下角获得凹曲线？

[我创建的侧边栏。]

Answer 1

这可能不是完整的答案。 我将这个提供给您，以便您可以从这里获取。

<section>
  <div class="card">
    <div class="holder container">
      <div class="button"></div>
    </div>
  </div>
</section>



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: system-ui, sans-serif;
}
p {
    font-size: 1.5em;
}
h3 {
    grid-column: 1 / -1;
    margin-block-start: 1em;
    text-align: center;
    font-weight: 400;
}
section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    gap: 1rem;
    place-content: center;
    width: 75%;
    margin-block: 2em;
}

.card {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: #fb3e21;
    border-radius: 1em;
    position: relative;
}

.holder {
    position: absolute;
    display: grid;
    place-items: center;
    width: 6em;
    height: 4em;
    background: #fff;
}
.holder::before, 
.holder::after {
  position: absolute;
  content: "";
  width: 3.65em;
  height: 1.25em;
  background: transparent;
}

.container {
    inset: calc(50% - 2em) 0 0 calc(100% - 10em);
    border-top-left-radius: 2.25em;
    border-bottom-left-radius: 2.25em;
}
.container::before {
    inset: -1.25em 0 0 calc(100% - .25em);
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.3em 0.3em 0 0.3em #fff;
}
.container::after {
    inset: 100% 0 0 calc(100% - .25em);
  border-top-right-radius: 1.25em;
  box-shadow: 0.3em -0.3em 0 0.3em #fff;
}

.button:hover .one {
    background: green;
}
.button:hover .one::before {
  box-shadow: 0.3em 0.3em 0 0.3em #ffb200;
}
.button:hover .one::after {
  box-shadow: 0.3em 0.3em 0 0.3em #ffb200;
}

.button {
    width: 3em;
    background: green;
    border-radius: 25px;
    z-index: 1;
    width: 200px;
    height: 50px;
    margin-left: 10px;
}