所以我有我想要做的设计。基本上它是一个从页面左下角到右上角的时间线。此外，我需要在行之间放置一些 div 元素。
我也希望能够做出响应，具体来说，它的长度会减少，但我仍然希望线条向上突出。
对于如何使用 ReactJS 和 TailwindCSS 实现这一点，有什么建议吗？
我在互联网上找到的例子是在线水平和垂直时间轴样式。没有关于弯曲时间线的示例
我创建了一个类似于您提供的图像的时间线，主要使用 grid。
grid
在我创建的示例中，有 3 个自定义实用程序一个>：
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .borderGray { @apply border-y-[1px] border-[lightgray] text-center; } .textClass { @apply m-2 break-words border-2 border-black text-[0.8rem] sm:text-sm md:text-base; } .slantedLine { background: linear-gradient( to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), lightgray 50%, rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100% ); } }
borderGray
textClass
font-size
slantedLine
现在，转到 HTML。
HTML
我创建了三种不同的变体，可以根据屏幕尺寸从一种变体更改为另一种变体，以防您想在响应式设计中使用多种变体。 这些变体如下所示：
这就是引擎盖下的样子：
Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link Some Text/Link
Some Text/Link
Tailwind 播放
这些变体之间存在三个差异：
col-span-{n}
grid-cols-{n}
grid-rows-{n}
col-start-{n}
row-start-{n}
每个奇数元素只是文本区域。我们在这些 div 中插入一个段落来显示所需的文本/链接：
每个偶数元素都是对角线类的一个区域 (slantedLine)。对角线从左下角到右上角。当我们将两个带有这种线条的元素放在一起时，我们会得到顶部和底部对角边框的效果：
一起：
它可能不会为您提供您正在寻找的确切设计，但它可以让您了解如何从这里继续前进。
如果您有疑问，请告诉我。 我希望它有所帮助。
我创建了一个类似于您提供的图像的时间线，主要使用
grid。在我创建的示例中，有 3 个自定义实用程序一个>：
main.css：
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .borderGray { @apply border-y-[1px] border-[lightgray] text-center; } .textClass { @apply m-2 break-words border-2 border-black text-[0.8rem] sm:text-sm md:text-base; } .slantedLine { background: linear-gradient( to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), lightgray 50%, rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100% ); } }borderGray类在元素的顶部和底部创建灰色边框并将文本居中。textClass负责font-size响应能力。这个类可以完全改变。这里看起来很方便。slantedLine类创建一条从左下角到右上角穿过元素的对角线。这是我曾经得到的答案： 在 div 背景中绘制对角线CSS现在，转到
HTML。我创建了三种不同的变体，可以根据屏幕尺寸从一种变体更改为另一种变体，以防您想在响应式设计中使用多种变体。 这些变体如下所示：
这就是引擎盖下的样子：
HTML：
Tailwind 播放
说明：
这些变体之间存在三个差异：
col-span-{n}。 文档grid-cols-{n}和grid-rows-{n}。 Docs-1 Docs-2grid内每个元素的col-start-{n}和row-start-{n}。 Docs-1每个奇数元素只是文本区域。我们在这些 div 中插入一个段落来显示所需的文本/链接：
每个偶数元素都是对角线类的一个区域 (
slantedLine)。对角线从左下角到右上角。当我们将两个带有这种线条的元素放在一起时，我们会得到顶部和底部对角边框的效果：一起：
它可能不会为您提供您正在寻找的确切设计，但它可以让您了解如何从这里继续前进。
如果您有疑问，请告诉我。 我希望它有所帮助。