如何基于Tailwind CSS实现元素间的响应式锚点弯曲虚线？

问题场景 #

开发响应式双列步骤模块时，固定SVG曲线会因步骤内容（如步骤3）高度变化出现对齐错位，需要替换为随内容自动适配的锚点式弯曲虚线。

实现方案 #

放弃固定SVG，采用SVG动态曲线+Tailwind定位工具类实现，让线条完全跟随步骤容器高度自适应，无需手动调整。

1. 重构HTML结构 #

移除原中间SVG列，替换为动态曲线容器，同时给每个步骤块添加相对定位锚点：

<section class="container mx-auto background mb-52">
    <div class="flex flex-row">
        <div class="flex flex-col justify-center relative max-w-[534px]">
            <img class="max-w-[534px] max-h-[575px]" src="https://via.placeholder.com/534x575.png" alt="">
        </div>

        <div class="ml-28 flex flex-row items-start">
            <!-- 左侧步骤列 -->
            <div class="max-w-[315px] space-y-8">
                <!-- 步骤1 -->
                <div class="text-left p-3 relative">
                    <div>
                        <h1 class="text-xl py-2"><span class="font-bold">1. </span>标题</h1>
                        <p class="font-roboto font-light">
                            任意长度文本，容器会自动撑开
                        </p>
                    </div>
                    <div class="py-4 flex flex-wrap">
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">在线策略</a>
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">可见性优化</a>
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">网站设计</a>
                    </div>
                </div>

                <!-- 步骤3（可添加长文本测试） -->
                <div class="text-left p-3 relative">
                    <div>
                        <h1 class="text-xl py-2"><span class="font-bold">3. </span>标题</h1>
                        <p class="font-roboto font-light">
                            这是步骤3的长文本示例，不管添加多少内容，曲线都会自动对齐锚点位置。比如这里可以写好几行，测试容器高度变化时的曲线适配效果，确保线条不会错位。
                        </p>
                    </div>
                    <div class="py-4 flex flex-wrap">
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">客户门户</a>
                    </div>
                </div>

                <!-- 步骤5 -->
                <div class="text-left p-3 relative">
                    <div>
                        <h1 class="text-xl py-2"><span class="font-bold">5. </span>标题</h1>
                        <p class="font-roboto font-light">
                            文本内容
                        </p>
                    </div>
                    <div class="py-4 flex flex-wrap">
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">转化优化</a>
                    </div>
                </div>
            </div>

            <!-- 动态曲线容器（替代原SVG列） -->
            <div class="relative mx-6 w-2 h-full">
                <!-- 连接步骤1-2的弯曲虚线 -->
                <div class="absolute left-1/2 top-[30px] -translate-x-1/2 w-[100px] h-[calc(100%-60px)]">
                    <svg class="w-full h-full" viewBox="0 0 100 200" preserveAspectRatio="none">
                        <path d="M0,0 C50,50 50,150 0,200" stroke="#your-primary-color" stroke-width="2" stroke-dasharray="4,4" fill="none" />
                    </svg>
                </div>
                <!-- 连接步骤3-4的弯曲虚线 -->
                <div class="absolute left-1/2 top-[calc(30px+100%)] -translate-x-1/2 w-[100px] h-[calc(100%-60px)]">
                    <svg class="w-full h-full" viewBox="0 0 100 200" preserveAspectRatio="none">
                        <path d="M0,0 C50,50 50,150 0,200" stroke="#your-primary-color" stroke-width="2" stroke-dasharray="4,4" fill="none" />
                    </svg>
                </div>
                <!-- 左侧垂直虚线（连接同列步骤） -->
                <div class="absolute left-1/2 top-0 bottom-0 w-[2px] -translate-x-1/2" style="background: repeating-linear-gradient(180deg, #your-primary-color, #your-primary-color 4px, transparent 4px, transparent 8px);"></div>
            </div>

            <!-- 右侧步骤列 -->
            <div class="max-w-[315px] space-y-8">
                <!-- 步骤2 -->
                <div class="text-left p-3 relative">
                    <div>
                        <h1 class="text-xl py-2"><span class="font-bold">2. </span>标题</h1>
                        <p class="font-roboto font-light">
                            文本内容
                        </p>
                    </div>
                    <div class="py-4 flex flex-wrap">
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">集成对接</a>
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">电商解决方案</a>
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">产品配置器</a>
                    </div>
                </div>

                <!-- 步骤4 -->
                <div class="text-left p-3 relative">
                    <div>
                        <h1 class="text-xl py-2"><span class="font-bold">4. </span>标题</h1>
                        <p class="font-roboto font-light">
                            文本内容
                        </p>
                    </div>
                    <div class="py-4 flex flex-wrap">
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">企业应用</a>
                        <a href="" class="m-1 px-4 py-3.5 text-primary text-sm border-2 font-semibold border-primary hover:bg-primary hover:text-white transition duration-300">数据仪表盘</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

2. 关键适配细节 #

• 步骤列用space-y-8控制间距，容器高度完全由内容撑开
• 中间曲线容器设置h-full，跟随左右列高度自动变化
• SVG曲线添加preserveAspectRatio="none"，实现拉伸适配，贝塞尔路径d="M0,0 C50,50 50,150 0,200"生成弯曲效果，stroke-dasharray="4,4"定义虚线样式
• 垂直虚线用CSS重复渐变实现，随容器高度自动延伸

3. 纯CSS替代方案（无SVG） #

若不想使用SVG，可通过clip-path实现弯曲虚线（兼容性略差）：

.curved-dash {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 100%;
  background: repeating-linear-gradient(180deg, #your-primary-color, #your-primary-color 4px, transparent 4px, transparent 8px);
  clip-path: path('M0,0 C50,50 50,150 0,200');
  transform: translateX(-50%);
}

将中间SVG容器替换为添加该类的<div>即可。

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