用 CSS 实现带圆弧连接线的时间线卡片

// RoundedTimeline.jsx
import styles from "./RoundedTimeline.module.css";

export function RoundedTimeline({ id, title, items }) {
  const titleId = `${id}-title`;

  return (
    <section className={styles.timeline} aria-labelledby={titleId}>
      <span className={styles.rail} aria-hidden="true" />
      <h2 className={styles.heading} id={titleId}>{title}</h2>

      <ol className={styles.list}>
        {items.map((item) => (
          <li className={styles.item} key={item.id}>
            <article className={styles.card}>
              <strong>{item.title}</strong>
              <span className={styles.description}>{item.description}</span>
            </article>
          </li>
        ))}
      </ol>
    </section>
  );
}

// 使用示例：
// <RoundedTimeline id="release" title="发布计划" items={[
//   { id: "scope", title: "确认范围", description: "明确本次发布内容。" },
//   { id: "build", title: "完成实现", description: "通过核心功能检查。" },
//   { id: "check", title: "验收验证", description: "记录结果并安排上线。" },
// ]} />

/* RoundedTimeline.module.css */
.timeline {
  --rail-x: 40px;
  --card-start: 88px;
  --gap: 20px;
  --rail-color: #d9dee7;
  --branch-color: #efafd1;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 8px 20px 32px 0;
  color: #24252b;
}

.rail {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  width: 1px;
  background: var(--rail-color);
}

.heading,
.list,
.item,
.card {
  box-sizing: border-box;
}

.heading {
  margin: 0 0 18px;
  font-size: 1.25rem;
}

.list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0 0 0 var(--card-start);
  list-style: none;
}

.item {
  position: relative;
  min-width: 0;
}

.item::before {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--gap));
  right: 100%;
  width: calc(var(--card-start) - var(--rail-x));
  height: calc(50% + var(--gap));
  box-sizing: border-box;
  border-bottom: 2px solid var(--branch-color);
  border-left: 2px solid var(--branch-color);
  border-bottom-left-radius: 18px;
  content: "";
  pointer-events: none;
}

.item:first-child::before {
  top: 0;
  height: 50%;
}

.card {
  position: relative;
  z-index: 1;
  padding: 20px 24px;
  border-radius: 18px;
  background: #fff8fb;
  line-height: 1.65;
}

.description {
  display: block;
  margin-top: 4px;
  color: #555963;
}

@media (max-width: 560px) {
  .timeline {
    --rail-x: 20px;
    --card-start: 54px;
    --gap: 16px;
  }

  .card {
    padding: 16px 18px;
    border-radius: 16px;
  }
}

<path d="M24 0 V44 Q24 60 40 60 H88" fill="none" stroke="#efafd1" stroke-width="2" />