如何用CSS或Tailwind实现带曲线连接列表项的侧边栏UI？

下面分别用原生CSS和Tailwind CSS两种方式实现图中侧边栏列表项的曲线连接效果：

一、原生CSS实现 #

核心思路是利用列表项的伪元素（::before/::after）绘制曲线，通过定位和圆角属性实现向内延伸的连接效果。

<div class="sidebar">
  <ul class="sidebar-list">
    <li class="list-item">首页</li>
    <li class="list-item">订单管理</li>
    <li class="list-item">客户中心</li>
    <li class="list-item">数据分析</li>
    <li class="list-item">系统设置</li>
  </ul>
</div>

.sidebar {
  width: 240px;
  background-color: #f5f5f5;
  padding: 16px 0;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.list-item {
  padding: 12px 24px;
  position: relative;
  margin-bottom: 8px;
}

/* 为除第一个外的列表项添加上半段曲线 */
.list-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-bottom-right-radius: 16px;
}

/* 为除最后一个外的列表项添加下半段曲线 */
.list-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-right: 2px solid #ccc;
  border-top: 2px solid #ccc;
  border-top-right-radius: 16px;
}

关键说明：

• 用::before和::after分别生成每个列表项上下的曲线段
• 通过border-radius实现圆角曲线，调整left值可控制曲线向内延伸的位置
• 用not(:first-child)/not(:last-child)避免首尾项出现多余曲线

二、Tailwind CSS实现 #

基于Tailwind的伪元素工具类快速实现效果，也可自定义工具类简化代码：

1. 内联类实现 #

<div class="w-60 bg-gray-100 py-4">
  <ul class="relative list-none p-0 m-0">
    <li class="py-3 px-6 mb-2 relative">首页</li>
    <li class="py-3 px-6 mb-2 relative before:content-[''] before:absolute before:top-[-8px] before:left-4 before:w-4 before:h-4 before:border-r-2 before:border-b-2 before:border-gray-300 before:rounded-br-lg">订单管理</li>
    <li class="py-3 px-6 mb-2 relative before:content-[''] before:absolute before:top-[-8px] before:left-4 before:w-4 before:h-4 before:border-r-2 before:border-b-2 before:border-gray-300 before:rounded-br-lg after:content-[''] after:absolute after:bottom-[-8px] after:left-4 after:w-4 after:h-4 after:border-r-2 after:border-t-2 after:border-gray-300 after:rounded-tr-lg">客户中心</li>
    <li class="py-3 px-6 mb-2 relative before:content-[''] before:absolute before:top-[-8px] before:left-4 before:w-4 before:h-4 before:border-r-2 before:border-b-2 before:border-gray-300 before:rounded-br-lg after:content-[''] after:absolute after:bottom-[-8px] after:left-4 after:w-4 after:h-4 after:border-r-2 after:border-t-2 after:border-gray-300 after:rounded-tr-lg">数据分析</li>
    <li class="py-3 px-6 relative before:content-[''] before:absolute before:top-[-8px] before:left-4 before:w-4 before:h-4 before:border-r-2 before:border-b-2 before:border-gray-300 before:rounded-br-lg">系统设置</li>
  </ul>
</div>

2. 自定义工具类简化 #

在tailwind.config.js中添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.sidebar-top-curve': {
          content: '""',
          position: 'absolute',
          top: '-8px',
          left: '16px',
          width: '16px',
          height: '16px',
          borderRight: '2px solid #d1d5db',
          borderBottom: '2px solid #d1d5db',
          borderBottomRightRadius: '16px',
        },
        '.sidebar-bottom-curve': {
          content: '""',
          position: 'absolute',
          bottom: '-8px',
          left: '16px',
          width: '16px',
          height: '16px',
          borderRight: '2px solid #d1d5db',
          borderTop: '2px solid #d1d5db',
          borderTopRightRadius: '16px',
        }
      })
    }
  ],
}

简化后的HTML代码：

<div class="w-60 bg-gray-100 py-4">
  <ul class="relative list-none p-0 m-0">
    <li class="py-3 px-6 mb-2 relative">首页</li>
    <li class="py-3 px-6 mb-2 relative before:sidebar-top-curve">订单管理</li>
    <li class="py-3 px-6 mb-2 relative before:sidebar-top-curve after:sidebar-bottom-curve">客户中心</li>
    <li class="py-3 px-6 mb-2 relative before:sidebar-top-curve after:sidebar-bottom-curve">数据分析</li>
    <li class="py-3 px-6 relative before:sidebar-top-curve">系统设置</li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者Mohamed Shahawy